2016 - 2024

感恩一路有你

js事件冒泡与事件委托 事件捕获和事件冒泡什么意思?

浏览量:2623 时间:2021-03-17 14:31:34 作者:admin

事件捕获和事件冒泡什么意思?

谢谢

关于事件捕获和事件冒泡,我写了一篇关于JS事件流和DOM事件处理程序的文章https://www.toutiao.com/i6392562710684369410/如果你有兴趣,可以直接去看看。

下面是对事件流知识的简要介绍。

事件流可以理解为页面上DOM节点之间传播的事件序列,主要分为三个过程:事件捕获阶段事件目标阶段事件冒泡阶段。您可以从下图中看到事件传播过程。

事件捕获

事件捕获的思想是,页面上最外层的节点首先接收事件,然后逐步将它们传播到内层元素。例如,在上面的示例中,事件捕获阶段的传播顺序是:window--> document--> HTML--> body--> table--> tbody--> tr--> td

event bubble

事件bubble与事件捕获正好相反。它的思想是让最里面的节点先接收事件,然后一步一步地传播到最外层。在上面的例子中,事件冒泡阶段的传播顺序是:TD--> tr--> tbody--> table--> body--> HTML--> document--> window

event target stage

无论是在事件传播阶段还是在事件冒泡阶段,它都必须经过事件目标阶段,这意味着要处理DOM节点的事件。

js如何取消事件冒泡?

1. Cancelbubble(HTML DOM事件对象属性):如果事件句柄希望阻止事件传播到包含对象,则必须将此属性设置为true。

2. Stoppropagation(htmldom事件对象方法):终止事件在传播过程的捕获、目标处理或冒泡阶段进一步传播。调用方法后,将调用处理事件的节点上的处理程序,并且不再将事件分派给其他节点。

3. Preventdefault(htmldom事件对象方法)告诉浏览器不要执行与事件相关联的默认操作。示例:函数stopbuble(E){if(E&E.stoppropagation)E.stoppropagation()elsewindow.event.cancelBubble=真}将此stopbuble(E)函数放入要防止事件冒泡的函数中,以防止事件冒泡

js事件冒泡与事件委托 html冒泡 js阻止冒泡和默认行为

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。