js事件流

最新推荐文章于 2024-01-23 18:59:37 发布

醉挽清欢

最新推荐文章于 2024-01-23 18:59:37 发布

阅读量341

点赞数

分类专栏： js 文章标签：事件流 DOM 事件捕获事件冒泡 addEventListener

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122901811

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

概念

由来：由于微软和网景乱搞,后来必须要为事件传播机制,制定一个标准,因为事件捕获是网景公司开发出来的,而事件冒泡是由微软公司开发出来的,它们都想要自己的技术成为标准,所以导致这两个公司老是干架,制定标准的人为了不让它们干架,所以研发了事件流

事件概念

事件是文档或者浏览器窗口中发生的，特定的交互瞬间
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字
事件是javaScript和DOM之间交互的桥梁
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应
例子：click事件

事件流

具体解释
当一个节点产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流。
简记
事件流描述的是从页面中接收事件的顺序

事件流

事件流的两种模型

冒泡型事件流（由下而上）

事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
例子·：
在这里插入图片描述

捕获型事件流（由上而下）

事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
例子·：在这里插入图片描述

DOM事件流（两种都会发生）

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
例子·：
在这里插入图片描述
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。
处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。
例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        background-color: aquamarine;
        height: 50px;
        width:300px;
        font-size: 50px;
    }
    div{
        background-color: rgb(133, 134, 134);
        height: 500px;
        width: 300px;
        margin: auto;
    }
</style>
<body>
    <div>
        <p>hh</p>
    </div>
</body>
<script>
    var p=document.querySelector('p');
    var div=document.querySelector('div');
    //默认冒泡阶段，从下往上
    p.onclick=function (){
        console.dir('p')
    }
    div.onclick=function (){
        console.dir('div')
    }
// </script>
</html>

效果如下
在这里插入图片描述
例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        background-color: aquamarine;
        height: 50px;
        width:300px;
        font-size: 50px;
    }
    div{
        background-color: rgb(133, 134, 134);
        height: 500px;
        width: 300px;
        margin: auto;
    }
</style>
<body>
    <div>
        <p>hh</p>
    </div>
</body>
<script>
    var p=document.querySelector('p');
    var div=document.querySelector('div');
    //true是捕获阶段 false 是冒泡阶段
    p.addEventListener('click',function(){
        console.dir('p')
    },true)
    div.addEventListener('click',function(){
        console.dir('div')
    },true)
// </script>
</html>

效果如下
在这里插入图片描述
例子3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        background-color: aquamarine;
        height: 50px;
        width:300px;
        font-size: 50px;
    }
    div{
        background-color: rgb(133, 134, 134);
        height: 500px;
        width: 300px;
        margin: auto;
    }
</style>
<body>
    <div>
        <p>hh</p>
    </div>
</body>
<script>
    var p=document.querySelector('p');
    var div=document.querySelector('div');
    //true是捕获阶段 false 是冒泡阶段
    p.addEventListener('click',function(){
        console.dir('p')
    },false)
    div.addEventListener('click',function(){
        console.dir('div')
    },true)
    document.body.addEventListener('click',function(){
        console.dir('body')
    },false)
</script>
</html>