JS Event handler example – event capture and bubble

• 2019 年 10 月 4 日
• 筆記

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://jerry.blog.csdn.net/article/details/100824067

Created by Jerry Wang, last modified on Jun 06, 2015

source link: http://www.ido321.com/1570.html

这个example 有一个陷阱，如果测试用的script不写在window.ready事件里，将得不到效果。

事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。浏览器会向下遍历DOM树直到找到触发事件的元素

点击button 1：

target: button

至此target node处理完了，继续处理hierarchy树的下一个节点：body. 此时event.target 还是button：

然后继续处理body下面的div 节点：

找到目的节点了：

一旦浏览器找到该元素，事件流就进入事件目标阶段，该阶段完成后，浏览器会沿DOM树向上冒泡直到最顶层容器，看看是否有其它元素需要使用同一个事件。

大多数现代库使用冒泡监听，而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡

第二个方式是调用stopImmediatePropagation，它不仅停止冒泡，也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。

This example also shows how to raise and catch custom event via jQuery:

<img src=“https://cloud.githubusercontent.com/assets/5669954/26556349/4ca0cb16-449a-11e7-8d2e-fb47d690b0f2.png)