事件回力镖 - 捕获与冒泡

传递机制听起来非常没有画面感，於是擅自替传递机制取了绰号叫回力镖，如同回力镖有去程，回程以及猎捕到猎物的瞬间。事件传递机制也分成类似的三个阶段:

1. capture phase
2. target phase
3. bubbling phase

下图是W3C的事件流程图，此图说明了当使用者点击td时，Event Object会由Window一路传递到td的父层tr，这个过程称作capture phase，接着到达触发事件的元素则是target phase，从event target一路回传的过程则称为bubbling phase

图片来源：W3C

为了验证规范，还是来实做一次吧～（ codepen连结 ）

以下先在 html 内各个元素各自绑定事件监听器，每当元素被点击，就会跳出视窗告知是哪个元素被点击以及是在事件流程的哪个阶段

const elements = document.querySelectorAll('*')

for (let element of elements) {
    element.addEventListener('click', e => alert(`phase: ${e.eventPhase}, ${element.tagName}`))
}

如果够仔细的话，会发现不管点击哪个元素，视窗都没有跳出第一个阶段，这是为什麽呢？

还记得昨天有提到addEventListener()的第三个引数吗？
当没有传入值或设定为false时，代表的是我们把监听器加到bubbling phase上，只要再多添加一个监听器，并将第三个引数设定为true，当点击元素时就可以观察到完整的回力镖过程了。

事件委派

观察每个介绍事件委派的例子，一定都会提到的状况就是要对大量的相同元素绑定事件监听，或是後来新增的元素也需要因应使用者的行为而给予设计好的流程等等。

聪明的程序好手想到的解法便是透过父节点来处理子节点。

对我来说，事件委派的核心精神就是「能坐就不站，能躺就不坐，能做一次的事就不做两次」。

厘清相似名词

一开始常常搞不清楚下面三个名词的差别，在练习的过程中才逐渐察觉如果没有使用事件委派的话，其实这三个名词代表的会是同一个元素，但一旦有使用到事件委派，它们各自代表的元素就可能会有如下的差别：

• event.target: 代表触发事件的元素
• event.currentTarget/ this: 代表设置监听器的元素

如果有同样困扰的朋友可以搭配 codepen 观察，相信会清楚许多～

参考资料：
Event order
DOM Event Architecture - W3C
Bubbling and capturing - JAVASCRIPT.INFO
DOM 的事件传递机制：捕获与冒泡