什么是捕获?什么是冒泡?
给元素绑定事件会经历三个阶段:一:捕获阶段(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>
点击这个元素的事件流的图如下
可以很清晰地看到给【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/831...
https://juejin.im/post/5aab87...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。