js事件冒泡详解 In 世界杯澳大利亚 @2026-06-21 17:28:52
js事件冒泡详解
什么是冒泡？
DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
addEventListener()方法
这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：
addEventListener(event, function, useCapture)
参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。
移除事件监听
如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()，语法是：
removeEventListener(event, function)
参数与addEventListener()一致。
兼容性
IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他们使用的是一下方法代替：
添加事件：
attachEvent(event, function)
移除事件：
detachEvent(event, function)
可以用以下方法解决兼容性问题：
if (div1.addEventListener) {
div1.addEventListener('click', function () {
console.log("支持")
});
} else if (div1.attachEvent) {
div1.attachEvent('onclick', function () {
console.log("不支持")
});
}
冒泡和捕获的具体区别
HTML
JS
事件冒泡
看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。
如果它的父级元素也有某个事件函数，当执行完它的事件函数后，也就会执行它父级的事件函数。
用代码感受下一下什么是事件冒泡：
复制
实例图：
在这里插入图片描述
复制
当点击区域①的时候：会依次弹出你点击了child区域 、你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这四个弹框。
当点击区域②的时候：会依次弹出你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这三个弹框。
当点击区域③的时候：会弹出 你点击了body区域 、 你点击了屏幕任何区域 这两个弹框。
当点击区域④的时候：就只弹出 你点击了屏幕任何区域 这一个弹框。
原文链接：https://blog.csdn.net/One_And_One/article/details/89307504