前端

`addEventListener` 方法是 JavaScript 中常用来为元素添加事件监听器的方法。这个方法可以让开发者指定当某个事件在目标元素上触发时，应该调用的回调函数。

`addEventListener` 方法通常接收三个参数：

1. `type`: 字符串，表示监听事件类型的名称，比如 `click`, `mouseover` 等。
2. `listener`: 函数，事件触发时浏览器调用的函数。
3. `options` or `useCapture`: （可选）布尔值或者是一个对象。这是第三个参数，它指定了事件处理的更多选项。

当第三个参数是布尔值时，它指的是 `useCapture`。如果 `useCapture` 设置为 `true`，则表示在捕获阶段触发事件处理函数；如果设置为 `false` 或者省略，则表示在冒泡阶段触发事件处理函数。在 DOM 事件处理中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器只在冒泡阶段被调用。

如果第三个参数是一个对象，它可以包含多个属性，如下所示：

- `capture`: 布尔值，和直接提供 `useCapture` 作为布尔值的效果一样。
- `once`: 布尔值，如果为 `true`，监听器会在添加之后第一次触发时自动移除。
- `passive`: 布尔值，如果为 `true`，表明监听器永远不会调用 `preventDefault()`。如果监听器确实调用了这个函数，客户端将会忽略它并且可能给出一个警告。

例如，如果我们想要在用户第一次点击按钮时做出反应，并且希望在捕获阶段而不是冒泡阶段处理事件，我们可以这样写代码：

```javascript
const button = document.querySelector('#myButton');
button.addEventListener('click', (event) => {
    // 处理点击事件
    console.log('Button clicked!');
}, { capture: true, once: true });
```

在这个例子中，`{ capture: true, once: true }` 作为第三个参数传递，确保了监听器在捕获阶段执行，并且只执行一次。

addEventListener 的第三个参数的作用是什么？