4. 事件监听器注册：addEventListener 与 attachEvent 的差异与兼容性处理

说到事件监听器的注册，很多新手可能觉得不就是个 addEventListener 嘛。但如果你经历过 IE8 还在横行的那几年，就知道事情没那么简单。

我最早做 Web 开发时，被 attachEvent 坑过不止一次。有一次线上反馈说某个按钮点了没反应，查了半天——嗯，用户用的是 IE7。从那以后，我写事件绑定都会多留个心眼。

4.1 标准之路：addEventListener

这是 W3C 推荐的标准方法。所有现代浏览器都支持。它的签名很简单：

target.addEventListener(type, listener, useCapture);

三个参数：

type：事件类型字符串，比如 'click'、'mouseover'。注意不带 on 前缀。
listener：回调函数，事件触发时执行。
useCapture：布尔值，控制事件在捕获阶段还是冒泡阶段触发。默认 false（冒泡阶段）。

关键特性：同一个元素、同一个事件类型，可以绑定多个监听器。它们会按注册顺序依次执行。不会互相覆盖。

举个例子：

const btn = document.getElementById('myBtn');

btn.addEventListener('click', function() {
  console.log('第一个监听器');
});

btn.addEventListener('click', function() {
  console.log('第二个监听器');
});

// 点击按钮后，控制台会输出：
// 第一个监听器
// 第二个监听器

你想想看，如果两个不同的模块都需要监听同一个按钮的点击事件，用 addEventListener 就完全没问题。各管各的，互不干扰。

4.2 历史的包袱：attachEvent

IE8 及更早版本不支持 addEventListener。它们用的是微软私有的 attachEvent。签名长这样：

target.attachEvent(eventNameWithOn, callback);

注意两个关键差异：

事件类型前面要加 on 前缀，比如 'onclick' 而不是 'click'。
没有第三个参数。IE 的旧事件模型只支持冒泡阶段，没有捕获阶段。

我在项目中遇到过这样一个问题：用 attachEvent 绑定的监听器，它的 this 指向的是 window 对象，而不是触发事件的元素。这跟 addEventListener 的行为完全不同。

// 标准模式下，this 指向触发事件的元素
btn.addEventListener('click', function() {
  console.log(this === btn); // true
});

// IE 旧模式下，this 指向 window
btn.attachEvent('onclick', function() {
  console.log(this === btn);   // false
  console.log(this === window); // true
});

为什么会这样？说白了，attachEvent 的实现机制跟标准不一样。它把回调函数当作普通函数调用，而不是作为元素的方法调用。

4.3 核心差异对比

我把两者的主要区别整理成了一张表，方便你对照：

对比维度	addEventListener	attachEvent
事件类型前缀	无前缀，如 `'click'`	带 `on` 前缀，如 `'onclick'`
捕获阶段支持	支持（第三个参数控制）	不支持（只有冒泡阶段）
this 指向	触发事件的元素	window 对象
多监听器支持	支持，按注册顺序执行	支持，但执行顺序不确定
移除方法	removeEventListener	detachEvent
浏览器支持	IE9+，所有现代浏览器	IE8 及更早版本

注意：attachEvent 还有一个隐藏的坑——如果同一个事件绑定了多个监听器，它们的执行顺序是不确定的。不像 addEventListener 那样保证按注册顺序执行。我曾经因为这个 bug 排查了一整个下午。

4.4 兼容性处理方案

既然要兼容旧 IE，我们就得写一个统一的注册函数。我个人习惯用特性检测的方式，而不是浏览器嗅探。因为特性检测更可靠，不会因为浏览器版本号变化而出问题。

下面是一个经过实战检验的兼容函数：

function addEvent(element, type, handler) {
  // 优先使用标准方法
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  }
  // 回退到 IE 旧方法
  else if (element.attachEvent) {
    element.attachEvent('on' + type, function() {
      // 修正 this 指向，让它指向触发事件的元素
      handler.call(element);
    });
  }
  // 最后的手段：直接赋值给 on 属性
  else {
    element['on' + type] = handler;
  }
}

小技巧：上面的代码用 handler.call(element) 修正了 this 指向。这样在回调函数里用 this 就能拿到触发事件的元素，跟标准行为保持一致。

对应的移除函数也要做兼容：

function removeEvent(element, type, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
  }
  else if (element.detachEvent) {
    element.detachEvent('on' + type, handler);
  }
  else {
    element['on' + type] = null;
  }
}

我曾经在维护一个老项目时，发现代码里直接用 element.onclick = fn 这种方式绑定事件。结果后来要加第二个监听器，直接把第一个覆盖了。嗯，这就是为什么我建议你从一开始就用标准化的注册方式。

4.5 知识体系总览

下面这张图帮你理清本章的核心逻辑：

4.6 实战中的避坑指南

讲完了理论，我分享几个实际开发中容易踩的坑：

不要用匿名函数做移除：如果你用匿名函数注册监听器，后面就没法移除了。因为 removeEventListener 需要传入同一个函数引用。我建议把回调函数单独定义，或者用变量保存。
注意内存泄漏：在单页应用里，如果元素被移除了但监听器没解绑，可能会造成内存泄漏。尤其是那些绑在全局对象上的事件。
useCapture 参数别乱传：很多人传第三个参数时传了个对象进去（比如 { passive: true }），这在旧浏览器上会出问题。如果你需要 passive 特性，记得先检测浏览器是否支持。

曾经踩过的坑：有一次我在一个老项目里用 attachEvent 绑定了 onbeforeunload 事件，结果在 IE8 上页面关闭时弹出了两次确认框。查了半天才发现是 attachEvent 和 window.onbeforeunload 同时存在，触发了两次。从那以后，我统一用封装好的 addEvent 函数，不再混用两种方式。

好了，关于事件监听器注册的差异和兼容性处理，就讲到这里。记住一句话：用特性检测，别用浏览器嗅探。写出来的代码才能在各种环境下稳定运行。

📚 课程目录

4. 事件监听器注册：addEventListener 与 attachEvent 的差异与兼容性处理

4.1 标准之路：addEventListener

4.2 历史的包袱：attachEvent

4.3 核心差异对比

4.4 兼容性处理方案

4.5 知识体系总览

4.6 实战中的避坑指南