前端面试题：addEventListener 第三个参数

大叔爱吃猕猴桃

addEventListener 第三个参数

addEventListener 语法 <pre><code>addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture); </code></pre><h3 id="参数"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E5%8F%82%E6%95%B0">参数</a></h3><code>type</code>表示监听<a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">事件类型</a>的大小写敏感的字符串。<code>listener</code>当所监听的事件类型触发时，会接收到一个事件通知（实现了 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event">Event</a></code> 接口的对象）对象。<code>listener</code> 必须是一个实现了 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener" aria-current="page">EventListener</a></code> 接口的对象，或者是一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions">函数</a>。有关回调本身的详细信息，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%9B%9E%E8%B0%83">事件监听回调</a><code>options</code> 可选一个指定有关 <code>listener</code> 属性的可选参数对象。可用的选项如下：<ul><li><code>capture</code> 可选一个布尔值，表示 <code>listener</code> 会在该类型的事件捕获阶段传播到该 <code>EventTarget</code> 时触发。</li><li><code>once</code> 可选一个布尔值，表示 <code>listener</code> 在添加之后最多只调用一次。如果为 <code>true</code>，<code>listener</code> 会在其被调用之后自动移除。</li><li><code>passive</code> 可选一个布尔值，设置为 <code>true</code> 时，表示 <code>listener</code> 永远不会调用 <code>preventDefault()</code>。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E4%BD%BF%E7%94%A8_passive_%E6%94%B9%E5%96%84%E6%BB%9A%E5%B1%8F%E6%80%A7%E8%83%BD">使用 passive 改善滚屏性能</a>以了解更多。</li><li><code>signal</code> 可选<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AbortSignal">AbortSignal</a></code>，该 <code>AbortSignal</code> 的 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController/abort">abort()</a></code> 方法被调用时，监听器会被移除。</li></ul><code>useCapture</code> 可选一个布尔值，表示在 DOM 树中注册了 <code>listener</code> 的元素，是否要先于它下面的 <code>EventTarget</code> 调用该 <code>listener</code>。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow" target="_blank" class="external">DOM Level 3 事件</a>及 <a href="https://www.quirksmode.org/js/events_order.html#link4" target="_blank" class="external">JavaScript 事件顺序</a>文档。如果没有指定，<code>useCapture</code> 默认为 <code>false</code>。 备注： 对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。