首页>>前端>>JavaScript->什么是事件冒泡和事件捕捉?

什么是事件冒泡和事件捕捉?

时间:2023-12-14 本站 点击:0

JavaScript的事件冒泡是什么

事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。即子级元素先触发,父级元素后触发。

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。

当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

所以,事件执行顺序是“body-div1-div2”,这就像你进去房间,必须先进入大院,再进入门一样。其实,2个都有一定的道理,目前,泡沫事件更合理,所以浏览器默认使用冒泡顺序,但是可以通过JS参数设置到底是用冒泡还是捕捉。

当我们点击子元素,触发的时事件会传递给父元素,这就是事件冒泡。

事件冒泡(阻止冒泡)和事件捕捉(阻止捕获)

1、事件冒泡和事件捕获 分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。事件流:描述的是从页面中接收事件的顺序。

2、由于事件捕获阶段没有可以阻止事件的函数,所以一般都是设置为事件冒泡 e.stopPropagation() stopPropagation是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是不会阻止默认行为。

3、stopPropagation()方法既可以阻止事件冒泡,也可以阻止事件捕获,也可以阻止处于目标阶段。

事件捕获、冒泡和事件委托

1、其实事件委托就是,不在目标阶段对目标事件进行相应,改为放到捕获和冒泡阶段。

2、如上图所示: 在JavaScript中,事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡。事件委托的实质就是将子元素事件的处理委托给父级元素处理。把事件监听器添加到它们的父元素上。

3、冒泡:点击div会触发父盒子上的监听事件 从内层捕获 事件捕获是Netscape浏览器开发团队提出的,很有意思,他们思想和IE 的截然相反。

4、冒泡两字会让我联想想起泡泡,泡泡是往上飞的对吧? 或者像水中鱼儿吐泡泡一样,那个泡泡从产生的起点往上浮。事件冒泡原理也是相同的,从下至上。事件捕获与事件冒泡完全相反。是从上至下到指定元素。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/32780.html