【JS】事件冒泡

最新推荐文章于 2023-04-26 00:30:27 发布

墨祈啊

最新推荐文章于 2023-04-26 00:30:27 发布

阅读量222

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_44782422/article/details/114861958

版权

49 篇文章 0 订阅

订阅专栏

比如：
body > div > span
给三者都绑定了单击响应函数，点击span，会触发span，div，body三者的单击响应函数。

比如：给document绑定了onmousemove的事件，倘若没有冒泡，页面中有div，鼠标滑过div时，onmousemove事件无法被触发，则onmousemove无法完成跟随鼠标移动而触发事件。

若不希望发生事件冒泡，可以通过事件对象来取消冒泡。
可以将事件对象的cancelBubbble设置为true，即可取消冒泡

span1.onclick = function(event){
	event.cancelBubble = true;
};

在开发中，有些元素是后添加的，但同样需要绑定事件。
我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的。
利用冒泡原理，可以尝试将其绑定给元素的共有祖先元素，通过祖先元素的响应函数来处理事件。

比如：
想要给li绑定事件，有些li是通过js后添加的，这时候可以将事件绑定给ul。

但这种方法有个问题，整个ul部分都可以触发这个事件。

处理方法：判断触发事件的对象是否是我们期望的元素，是则执行
需要用到event.target.元素

if (event.target.className=="link"){
	//执行响应函数
}

关于事件的传播，网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1. 捕获阶段 - 在捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2. 目标阶段 - 事件捕获到目标元素，捕获结束，开始在目标上触发事件。
3. 冒泡阶段 - 事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件。
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。
IE8及以下浏览器中没有捕获阶段。

关注