什么是捕获？什么是冒泡？
给元素绑定事件会经历三个阶段：一：捕获阶段(capture phase)--先从根元素流向目标元素；二：目标阶段(target phase)--在目标元素上的事件被触发；三：冒泡阶段(bubbling phase)--目标元素流向根元素
就像你中午放学回家吃个饭，这件事情一定经历三个阶段：一：回家阶段-- 从学校出发-->到你家楼下-->走到门口-->进门 二：目标阶段-- 坐下吃饭 三：去学校阶段-- 出门-->走到你家楼下-->回到学校
来看一个例子
<html>
<table>
<tbody>
<tr>
<td>Shady Grove</td>
<td>Aeolian</td>
</tr>
<tr>
<td>Over the River,Charlie</td>
<td>Dorian</td>
</tr>
</tbody>
</table>
</html>
image.png
点击这个元素的事件流的图如下
image.png
可以很清晰地看到给【over the river,charlie】这个td元素绑定的点击事件的事件流经历了三个阶段：
-
捕获阶段 window->document->html->body->table->tbody->tr
-
目标阶段 td【over the river,charlie】
-
冒泡阶段 tr->tbody->->table->body->html->document->window
所以如果给元素绑定的事件的useCapture默认为true，表示在捕获阶段触发，改为false，表示在冒泡阶段触发。
也就是说事件流一定是按上面的顺序经过这三个阶段。设置true和false的不一样就是，比如在上面回家吃饭的事件中，你给到楼下绑定了一个【吃辣条】的事件，true就表示在捕获阶段即回家的过程中的到楼下就吃了辣条，false表示在冒泡阶段即去学校的过程中的到楼下吃辣条。
关于事件捕获，事件冒泡的引用场景，有事件委托等。下面引用两篇文章。
https://www.jianshu.com/p/8311f782f70d
https://juejin.im/post/5aab87f9f265da23994e47dc#heading-2
网友评论