javascript的事件流

来源：互联网发布：贵阳市发改委数据铁笼编辑：程序博客网时间：2024/06/06 01:52

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

事件流是什么？

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

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

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

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

案例代码

<!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事件，所以，这两个事件就是看谁先绑定的靠前，谁就先实行。。。

阅读全文

1 0

javascript的事件流

事件流是什么？

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

相关方法 addEventListener

案例代码

重点：

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