在DOM上同时绑定两个点击事件(一个用捕获,一个用冒泡),事件总共会执行几次,先执行哪个事件?

在DOM上同时绑定两个点击事件,一个使用捕获,一个使用冒泡,事件总共会执行两次

执行顺序:

  1. 捕获阶段的事件先执行。 当事件发生在目标元素的祖先元素上时,捕获阶段的监听器会先被触发,一路向下传递到目标元素。

  2. 冒泡阶段的事件后执行。 事件在目标元素上触发后,会沿着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树的层级关系,从外到内执行捕获,从内到外执行冒泡。

posted @ 2024-12-05 09:52  王铁柱6  阅读(91)  评论(0)    收藏  举报