前端

`addEventListener` 和 `attachEvent` 都是用于在 Web 开发中将事件监听器绑定到 DOM 元素上的方法，但它们之间存在一些关键差异：

1. **浏览器兼容性**：
   - `addEventListener` 是 DOM Level 2 Events 规范的一部分，它被所有现代浏览器（包括 IE9 及以上版本）支持。
   - `attachEvent` 是微软为 IE8 及以下版本的浏览器提出的一个方法，不是标准的 DOM 事件处理方法。

2. **语法**：
   - `addEventListener` 采用以下语法：
     ```javascript
     element.addEventListener(event, function, useCapture);
     ```
     其中 `event` 是事件名称（不带 `on` 前缀），`function` 是事件处理函数，而 `useCapture` 是一个布尔值，用于指定事件是在捕获阶段处理还是在冒泡阶段处理。
   - `attachEvent` 采用不同的语法：
     ```javascript
     element.attachEvent(eventWithOn, function);
     ```
     其中 `eventWithOn` 是带有 `on` 前缀的事件名称，`function` 是事件处理函数。

3. **事件流**：
   - `addEventListener` 允许你指定事件处理函数是在捕获阶段还是冒泡阶段被调用。
   - `attachEvent` 只支持事件冒泡，不支持事件捕获。

4. **this 关键字**：
   - 在 `addEventListener` 中绑定的事件处理函数里，`this` 指向绑定事件的元素。
   - 在 `attachEvent` 中绑定的事件处理函数里，`this` 指向全局对象 `window`，而不是绑定事件的元素。

5. **多个事件监听器**：
   - 使用 `addEventListener`，你可以为同一个事件添加多个事件监听器，它们会按顺序执行。
   - 而 `attachEvent` 有可能会导致多个事件监听器的执行顺序不一致，而且同一个事件处理函数如果添加多次，也会被执行多次。

6. **移除事件监听器**：
   - `addEventListener` 配对的是 `removeEventListener`，可以用于移除事件监听器。
   - `attachEvent` 配对的是 `detachEvent`，用于移除事件监听器，但需要确保传递给 `detachEvent` 的参数与 `attachEvent` 时的参数完全一致。

由于 `attachEvent` 方法是一个非标准方法且仅在老版本的 IE 浏览器中可用，所以通常推荐使用 `addEventListener`，因为它是跨浏览器兼容的并遵循现代的 Web 标准。当需要支持老版本 IE 浏览器时，开发者可能需要编写额外的代码来兼容 `attachEvent`。

addEventListener 和 attachEvent 的区别是什么？