javascript的事件流

最新推荐文章于 2023-08-12 14:30:21 发布

暮志未晚NAN

最新推荐文章于 2023-08-12 14:30:21 发布

阅读量986

点赞数 1

分类专栏： javascript 文章标签： javascript 事件流 addEvent

本文链接：https://blog.csdn.net/qq_30100043/article/details/77186811

版权

javascript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

今天和群里的小朋友们一起沟通事件流问题，突然发现了自己也有一些没有注意的地方，今天就此更新一篇关于事件流的文章。

事件流是什么？

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。（摘自百度百科）

模型三阶段捕获阶段、目标阶段、冒泡阶段

在DOM兼容浏览器中，事件流分为3个阶段：
（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段

具体过程，就是先捕获到目标然后再冒泡。

参数	描述
event	必须。字符串，指定事件名。
function	必须。指定要事件触发时执行的函数。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

案例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            width: 200px;
            height: 200px;
            background: orange;
        }
        #outer {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background: #eeddff;
        }
        #inner {
            position: relative;
            top: 25px;
            left:25px;
            width: 50px;
            height: 50px;
            background: #44ddff;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>
</body>
<script>
    var wrap = document.getElementById('wrap');
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');

    wrap.addEventListener('click',function(){
        alert('789');
    },false);
    outer.addEventListener('click',function(){
        alert('456');
    },false);
    inner.addEventListener('click',function(){
        alert('123');
    },false);
    inner.addEventListener('click',function(){
        alert('inner');
    },true);
    wrap.addEventListener('click',function(){
        alert('wrap');
    },true);
    outer.addEventListener('click',function(){
        alert('outer');
    },true);
</script>
</html>

（以上代码摘自https://segmentfault.com/a/1190000003497939）
点击查看此案例，我们会发现，首先是触发的是捕获阶段的事件，然后再触发的是冒泡阶段的事件。

重点：

我们会发现inner的dom对象上绑定的两个事件，是先弹出的123，然后又弹出的inner。这个是为什么呢？
这是因为如果当前的dom对象已经处于当前点击位置的最底部了（重点是这里最底部，如果没有到最底部，还是和外部的两个一样的）。就是说如果这个dom对象是捕获的终点也是冒泡的起点，它就不区分冒泡捕获了，只是纯粹的绑定了两个dom事件，所以，这两个事件就是看谁先绑定的靠前，谁就先实行。。。

暮志未晚NAN

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript的事件流

今天和群里的小朋友们一起沟通事件流问题，突然发现了自己也有一些没有注意的地方，今天就此更新一篇关于事件流的文章。事件流是什么？DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时
复制链接

扫一扫