关于事件传播的三个阶段

事件传播分为三个阶段:事件捕获,目标对象本身的事件程序,事件冒泡。

事件传播的捕获阶段像反向的冒泡阶段。最先调用Window对象的捕获处理程序,接着是body对象的,再然后是 DOM 树向下,以此类推,直到调用事件目标的父元素的捕获事件处理程序。在目标对象本身上注册的捕获事件处理程序不会被调用。

addEventListener()把一个布尔值作为其第三个参数。如果这个参数是true,那么事件处理程序被注册为捕获事件处理程序,它会在事件传播的第一个阶段调用。事件冒泡得到广泛的支持,它能用在包括 IE 在内的所有浏览器中,且无论事件处理程序以哪种方式注册(除非它们被注册为捕获事件处理程序)。而事件捕获只能用于以addEventListener()注册且第三个参数是true的事件处理程序中。这意味着事件捕获无法在 IE9 之前的 IE 中使用。

通过以下代码示例演示事件传播的三个阶段:

点击“测试按钮”,获取测试结果:

event_propagation
事件传播的三个阶段

事件捕获提供了在事件没有送达目标之前查看它们的机会。事件捕获能用于程序调式,或用于事件取消技术,过滤掉事件从而使目标事件处事程序绝不会被调用,比如下面使用事件代理的代码:

点击“测试按钮”,获取测试结果:

event_stop_by_capture
目标事件未触发,在捕获阶段停止了事件的继续传播

本文参考:《JavaScript 权威指南》 17.3.6 事件传播

发表评论

电子邮件地址不会被公开。 必填项已用*标注