JS 中 addEventListen 第三个参数 useCapture_javascript addeventlistener usecapture-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46684929/article/details/124514965

本文深入解析JavaScript中的事件监听器参数useCapture，详细解释了其作用和工作原理。通过代码示例展示了如何在捕获和冒泡阶段触发事件监听器，以及在不同浏览器版本中的兼容性问题。理解useCapture对于优化事件处理流程至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、官方解释

useCapture可选Boolean，在DOM树中，注册了listener的元素，是否要先于它下面的EventTarget，调用该listener。当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看事件流及 JavaScript Event order 文档。如果没有指定， useCapture 默认为 false 。
注意: 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发该元素（即事件目标）上的所有监听器，而不在乎这个监听器到底在注册时useCapture 参数值是true还是false。
注意: useCapture 仅仅在现代浏览器最近的几个版本中是可选的。例如 Firefox 6以前的版本都不是可选的。为了能够提供更广泛的支持，你应该提供这个参数。

解释：true将其置为捕获阶段触发，false冒泡阶段就被触发

2、代码演示

HTML：

 <ul id="ul">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
  </ul>

JS:

var ul = document.querySelector('#ul');
	ul.addEventListener('click', function () {
	alert('ul') // ul是在冒泡阶段就被触发
}, false);

var li = document.querySelector('#ul > li');
	li.addEventListener('click', function () {
    alert('li') // li是在捕获阶段就被触发
}, true)

// var ul = document.querySelector('#ul');
// ul.addEventListener('click', function () {
//     console.log('ul') // ul是在冒泡阶段就被触发
// }, false);

// var li = document.querySelector('#ul > li');
// li.addEventListener('click', function () {
//     console.log('li') // li是在冒泡阶段就被触发
// }, false)      
var ul = document.querySelector('#ul');
	ul.addEventListener('click', function () {
    console.log('ul') // ul是在冒泡阶段就被触发
});

var li = document.querySelector('#ul > li');
	li.addEventListener('click', function () {
    console.log('li') // li是在冒泡阶段就被触发
})