window.addEventListener()方法的第三个参数是一个布尔值,叫做useCapture。
这个参数决定了事件是在捕获阶段还是冒泡阶段处理。当useCapture设为true时,事件在捕获阶段处理;当设为false时,事件在冒泡阶段处理。
捕获阶段是指从根元素到目标元素的过程,而冒泡阶段则是从目标元素再回到根元素的过程。
例如,如果你有一个嵌套的元素结构,像这样:
<div id="parent">
<button id="child">Click me</button>
</div>
然后你为父元素和子元素都添加了一个点击事件监听器:
document.getElementById('parent').addEventListener('click', () => {
console.log('parent clicked');
}, true); // 使用捕获
document.getElementById('child').addEventListener('click', () => {
console.log('child clicked');
}, false); // 使用冒泡
当你点击按钮时,如果useCapture设为true,则会先打印"parent clicked",然后打印"child clicked"。而如果useCapture设为false,则会先打印"child clicked",然后打印"parent clicked"。
通常情况下,我们不需要关心这个参数,因为大多数事件都是在冒泡阶段处理的,所以一般会把这个参数设为false或者省略不写。