在DOM上同时绑定两个点击事件(一个用捕获,一个用冒泡),事件总共会执行几次,先执行哪个事件?
在DOM上同时绑定两个点击事件,一个使用捕获,一个使用冒泡,事件总共会执行两次。
执行顺序:
-
捕获阶段的事件先执行。 当事件发生在目标元素的祖先元素上时,捕获阶段的监听器会先被触发,一路向下传递到目标元素。
-
冒泡阶段的事件后执行。 事件在目标元素上触发后,会沿着DOM树向上冒泡,依次触发祖先元素上绑定的冒泡阶段监听器。
示例:
假设HTML结构如下:
<div id="outer">
<button id="inner">Click Me</button>
</div>
JavaScript代码如下:
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
// 捕获阶段监听器
outer.addEventListener('click', function(event) {
console.log('outer capture');
}, true); // true表示捕获阶段
// 冒泡阶段监听器
inner.addEventListener('click', function(event) {
console.log('inner bubble');
}, false); // false或省略表示冒泡阶段
// 冒泡阶段监听器
outer.addEventListener('click', function(event) {
console.log('outer bubble');
}); // 省略第三个参数,默认为冒泡阶段
当你点击按钮时,控制台会输出:
outer capture
inner bubble
outer bubble
总结:
即使事件处理函数绑定在同一个元素上,捕获阶段的事件总是先于冒泡阶段的事件执行。如果事件处理函数绑定在不同的祖先元素上,则按照DOM树的层级关系,从外到内执行捕获,从内到外执行冒泡。