没网站做cpa,深圳市住房和建设局人事调整,青岛网站建设康之迅,qq空间网站根目录你在学习和编写JavaScript时可能听说过事件冒泡#xff08;event bubbling#xff09;。它会发生在多个元素存在嵌套关系#xff0c;并且这些元素都注册了同一事件(例如click)的监听器时。
但是事件冒泡只是事件机制的一部分。它经常与事件捕获(event capturing)和事件传播…你在学习和编写JavaScript时可能听说过事件冒泡event bubbling。它会发生在多个元素存在嵌套关系并且这些元素都注册了同一事件(例如click)的监听器时。
但是事件冒泡只是事件机制的一部分。它经常与事件捕获(event capturing)和事件传播(event propagation)一起被提及。对于在JavaScript中处理事件来说对这三个概念的透彻理解是非常必要的——例如你希望实现事件委托模式。
什么是事件传播
让我们从事件传播开始。这是事件冒泡和事件捕获的统称。以一个相册缩略图列表为例 点击一张图片后不仅会为对应的 img 元素生成一个 click 事件还会为它的父级 a 元素以及祖父级 li元素等上级元素生成一个 click 事件一直到达该元素的最顶级上级元素最后在 window 对象上终止。
用DOM术语来说该图片是事件目标event target是最内层的元素点击就是在这个元素上产生的。事件目标加上它的所有上级元素从它的父级元素一直到window对象在DOM树中形成了一个分支。例如对于我们的例子来说这个分支将由如下节点组成: img、a、li、ul、body、html、document、window。
注意window实际上并不是DOM节点不过它实现了 EventTarget 接口所以为了简便起见我们为把它视为 document 对象的父级元素来处理。
这个分支很重要因为它是事件传播的路径。这种传播是调用指定类型事件所有监听器的过程这些监听器绑定在了这个分支上的节点上。每个监听器在调用时会有一个 event 对象它含有关于当前事件的信息稍后详细介绍。
记得在一个节点上可以为相同的事件类型注册多个监听器。当事件传播到达此节点时监听器按照它们注册的顺序被调用。
事件传播是双向的从window到事件目标然后再返回。这种传播可以分为三个阶段
从window到事件目标的父级元素这是捕获阶段事件目标自身这是目标阶段从事件目标的父级元素回到 window这是冒泡阶段
事件捕获阶段
在这一阶段只有那些设置为捕获阶段工作的监听器才被调用。要为捕获阶段设置监听器可以在调用 addEventListener 时设置第三个参数为 true 如果省略此参数则其默认值为false该监听器在捕获阶段不工作而是在冒泡阶段工作。
因此在这个阶段只有在从window到事件目标父级元素之间路径上找到的监听器才被调用。
事件目标阶段
在此阶段将调用在事件目标上注册的所有监听器而不管其捕获标志的值如何。
事件冒泡阶段
在事件冒泡阶段只有标记为非捕获的监听器才会被调用。也就是那些调用 addEventListener() 时第三个参数为 false 时注册的监听器。默认值即为false。 请注意虽然所有事件都会在捕获阶段到达事件目标不过有些事件如focus、blur、load等它们不会冒泡。也就是说它们的事件传播在目标阶段后终止。
因此在传播结束时分支上的每个监听器都只被调用一次。
并非每种类型的事件都会冒泡。在传播过程中监听器可以读取 event 对象的 .bubbles 属性来得知该事件是否冒泡。
W3C UIEvents规范的提供的如下图片演示了事件流的三个阶段。 访问事件传播信息
上面我提到了event对象的.bubbles属性。此对象提供了许多其他属性可供监听器访问与传播相关的信息。
e.target 指向事件目标。 e.currentTarget 是正在执行的监听器注册到的节点。 我们可以用 e.eventPhase 得知当前的阶段。它的值是一个数字1到3分别对应的是 Event 构造函数的常量 CAPTURING_PHASE, AT_TARGET 和 BUBBLING_PHASE。
整合在一起
我们把上面的概念付诸实践。我们的HTML代码如下 event.js 内容如下 我们为每个元素在捕获阶段和冒泡阶段都分别绑定了监听器然后在浏览器中鼠标点击图片在控制台中输出如下 停止事件传播
事件传播是可以终止的只需要在任意监听器中调用 event 对象的 stopPropagation() 方法。这意味着传播路径中当前节点之后节点上的所有监听器不会被调用了。不过绑定在当前目标上的其他剩余监听器仍将调用。
我们仍使用上面的例子现在想在图片点击后停止冒泡的过程可以修改图片的click监听器如下 执行结果如下 在上图中可以看到冒泡阶段的监听器没有触发。
立即停止传播
除了 stopPropagation还有 stopImmediatePropagation。正如它的名字所表明的那样会立即停止事件传播甚至阻止当前节点上的其他监听器被调用。
假设我们想要事件传播到了图片时立即停止继续传播可以修改上面的 hanlder1 函数把 stopPropagation 替换为 stopImmediatePropagation。执行效果如下 我们可以看到绑定在图片上的第二个监听器函数并没有执行事件传播过程被立即终止了。
事件的取消
有些事件会在传播结束后执行一些默认的浏览器操作。例如单击一个链接或单击表单提交按钮分别会使浏览器导航到新页面和提交表单。
通过在监听器中调用event对象的另一个方法 preventDefault()可以避免浏览器执行默认的操作。
结语
在本文中我们学习了事件冒泡和事件捕获是如何在JavaScript中工作的。如果你有任何问题或意见欢迎留言。
