什么是捕获?什么是冒泡?

给元素绑定事件会经历三个阶段:一:捕获阶段(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>

html.png

点击这个元素的事件流的图如下

clipboard.png

可以很清晰地看到给【over the river,charlie】这个td元素绑定的点击事件的事件流经历了三个阶段:

  1. 捕获阶段 window->document->html->body->table->tbody->tr
  2. 目标阶段 td【over the river,charlie】
  3. 冒泡阶段 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...


fanfana
29 声望1 粉丝