addevnentlister参数
语法如下：
1. target.addEventListener(type, listener, useCapture);
2. target.addEventListener(type, listener, options);
3. target.addEventListener(type, listener, useCapture, wantsUntrusted(Non-Standard));
以chrome click为例：
(method) HTMLElement.addEventListener<"click">(type: "click", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
参数1-type：
参数1指的是 事件类型，click、mouseenter 等
参数2-listener
参数2-listeer:表示要触发的事件处理函数
参数3-useCapture ｜ options
useCapture[可选]
【boolean】值。在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定， useCapture 默认为 false 。
兼容性查询
options[可选]
参数3-options:指定有关 listener 属性的可选参数
{
capture: false,
once: false,
passive: false
}
capture： 等价于useCapture,表示是否listener对象会在该类型的事件捕获阶段传播到该EventTarget时触发。once：表示listener 在添加之后最多只调用一次。如果是true，listener会在其被调用之后自动移除，设置是否单次监听。passive： 是否让阻止默认行为(event.preventDefault()) 失效。signal：AbortSignal，该AbortSignal的abort()方法被调用时，监听器会被移除。mozSystemGroup(Non-Standard): 只能在 XBL 或者是 Firefox' chrome 使用，表示listener被添加到 system group。
验证useCapture
<div id="div" style="border: 1px solid red;margin: 20px">
<button id="btn">按钮</button>
</div>
场景1:
const btn = document.getElementById('btn');
const div = document.getElementById('div');
btn.addEventListener('click', () => {
console.log('btn')
}, false)
div.addEventListener('click', () => {
console.log('div')
}, false)
- 结果：btn -> div 场景2:
const btn = document.getElementById('btn');
const div = document.getElementById('div');
btn.addEventListener('click', () => {
console.log('btn')
}, true)
div.addEventListener('click', () => {
console.log('div')
}, false)
- 结果：btn -> div 场景3:
const btn = document.getElementById('btn');
const div = document.getElementById('div');
btn.addEventListener('click', () => {
console.log('btn')
}, false)
div.addEventListener('click', () => {
console.log('div')
}, true)
- 结果：div -> btn 场景4:
const btn = document.getElementById('btn');
const div = document.getElementById('div');
btn.addEventListener('click', () => {
console.log('btn')
}, true)
div.addEventListener('click', () => {
console.log('div')
}, true)
- 结果：div -> btn
最终得出结论：
•true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。
由此得出了useCapture的作用：决定事件在哪个阶段被触发。 false时：冒泡阶段触发 true： 捕获阶段触发。默认值是 false，即冒泡触发
