事件流的实用总结
事件流的概念不复杂，却很容易误解。同样，如果你觉得自己掌握的清楚，可以尝试猜猜下面的几个例子的输出结果会是什么样。
事件流的两种模型
冒泡和捕获是事件流的两种模型
- 事件冒泡（event bubbling）是IE的提出的事件流
- 事件捕获（event capturing）是 Netscape Communicator 提出的事件流。
其中目前浏览器采用的默认是冒泡型。
事件流包含三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段。
不论哪种事件模型包含着三个阶段，差异在于在什么阶段处理事件。
我们可以在事件的处理程序中，通过 event.eventPhase 来获取到处理程序所在的阶段：
- value=1 捕获阶段
- value=2 处于目标
- value=3 冒泡阶段
需要澄清的概念
我们假定 DOM 元素是层层包裹的洋葱，假定 DOM 结构为：
<body>
<div>
<span>here is span content</span>
</div>
</body>
加入点击了 span 元素，那么在捕获阶段事件的传递序列为：body -> div；在处于目标阶段，事件停留在span；在冒泡阶段，事件的传递序列为：div -> body。
我们在任意一个 DOM 上点击，比如点击 span，或点击 div 但不点击到 span，如果该 DOM 上有事件处理程序，event.eventPhase 必然为 2。
结论一：直接点击元素，并触发它上面的事件处理程序，eventPhase一定等于2。
我们能得到 event.eventPhase 不为 2 的结果，一定是点击元素 和 绑定了事件处理程序的不是同一个元素。
先来个简单的例子：
<button id="testBtn""><i>mockicon</i> Click Me</button>
<script>
const btn = document.getElementById('testBtn');
btn.addEventListener('click', function(e){
const evt = e || event;
console.log(evt.eventPhase);
}/*,true*/)
</script>
（1）定义了一个 button，在它上面绑定点击事件，直接点击它，事件处理程序获取到的 event.eventPhase 是 2
（2）按钮内部有一个<i class="icon"></i>，点击按钮中的i，事件处理程序获取到的 event.eventPhase 是 3
（3）如果通过 addEventListener 指定第三个参数为 true，采用事件捕获的事件流，点击按钮中的 i，事件处理程序获取到的 event.eventPhase 是 1
在（2）中之所以输出为 3，是因为事件在捕获、冒泡阶段都经过了 div，但是在冒泡阶段才被处理；（3）则是在捕获阶段就被处理了。
结论二：在子元素上点击，触发父元素的点击事件，事件对象上的eventPhase为3；点击事件用捕获模型，则eventPhase为1
务必记住的一点是，eventPhase 为 2 只属于直接点击的元素。
你完全懂了吗
拿下面的4个例子玩一玩，看你是否能理解输出结果。如下是页面的 css 和 html 结构。
<style>
div {
border: 3px solid red;
padding: 15px;
width: 500px;
border-radius: 5px;
margin-bottom: 5px;
}
h3 {
border: 2px solid green;
}
pre {
border: 1px solid gray;
padding: 5px;
}
</style>
<div>
<h3></h3>
<pre></pre>
</div>
1. 只在父元素上绑定点击事件
<div id="c1" onclick="handler(event)">
<h3 id="t1"> 测试 #1 只在父元素上绑定点击事件</h3>
<pre>
点击子元素H3 或 PRE：
DIV clicked, phase = 3
点击其他空白区域：
DIV clicked, phase = 2
</pre>
</div>
<script>
function handler(event) {
console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
}
</script>
按照结论二，点击 h3 或 pre，自身没有事件处理，只会冒泡到 div 上，从而 eventPhase 输出为 3。
按照结论一，点击 div 内的空白区域，相当于直接点击 div 元素，输出 eventPhase 为 1。
2. 在父、子元素上都绑定点击事件
<div id="c2" onclick="handler(event)">
<h3 id="t2" onclick="handler(event)">测试 #2 在父、子元素上都绑定点击事件</h3>
<pre>
点击子元素H3：
H3 clicked, phase = 2
DIV clicked, phase = 3
点击子元素PRE
DIV clicked, phase = 3
点击非子元素的空白区域：
DIV clicked, phase = 2
</pre>
</div>
<script>
function handler(event) {
console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
}
</script>
相对上一个例子的唯一变化是，h3 上也绑定了事件处理程序，这里唯一变化的是点击 h3 的时候的输出。
结合结论一、二，在 h3 点击时，先触发 h3 的 eventPhase 为 2，然后再冒泡到 div 上 eventPhase 为 3。
3. 捕获方式只在父元素上绑定点击事件
<div id="c3">
<h3 id="t3"> 测试 #3 捕获方式只在父元素上绑定点击事件</h3>
<pre>
点击子元素H3：
DIV clicked, phase = 1
点击非子元素的空白区域：
DIV clicked, phase = 2
</pre>
</div>
<script>
function handler(event) {
console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
}
var c3 = document.getElementById('c3');
c3.addEventListener('click', handler, true);
</script>
代码跟例子一一样，只是捕获的方式从冒泡修改为了捕获。
根据结论二，点击h3的时候，早于事件到达 h3，就在div被捕获了，输出为div eventPhase为1。
点击空白区域，则仍旧满足结论一。
自己曾经不能理解，虽然点击的是h3，但是点击先作用在洋葱的外层（div）上，为什么eventPhase不会是2，这里继续澄清：
eventPhase 的值，在 真正 被点击的元素上是 2，之前都是 1，之后都是 3。
4. 在父、子元素上绑定捕获型点击事件
<div id="c4">
<h3 id="t4"> 测试 #4 捕获方式在父、字元素上都绑定点击事件</h3>
<pre>
点击子元素H3：
DIV clicked, phase = 1
H3 clicked, phase = 2
点击非子元素的空白区域：
DIV clicked, phase = 2
</pre>
</div>
<script>
function handler(event) {
console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
}
var c4 = document.getElementById('c4');
var t4 = document.getElementById('t4');
c4.addEventListener('click', handler, true);
t4.addEventListener('click', handler, true);
</script>
根据结论二：点击 h3 的时候，会先在捕获阶段出发 div eventPhase 为 1 的输出，然后到达 h3 eventPhase 为 2 的输出。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 正则表达式练习
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论