3、事件监听与绑定：addEventListener原理、事件处理器注册、匿名函数与命名函数

事件驱动架构里，最基础也最核心的操作就是「监听」和「绑定」。说白了，就是告诉浏览器：「嘿，当这个元素被点击时，帮我跑这段代码。」

我刚开始写前端时，总觉得这事很简单——不就是 onclick 嘛。直到有一次维护一个老项目，发现事件绑定混乱、内存泄漏、无法解绑……嗯，从那以后我才认真研究起 addEventListener 的底层逻辑。

3.1 addEventListener 的工作原理

先看它的签名：

target.addEventListener(type, listener, options);

三个参数，但第三个 options 可以是一个布尔值（传统用法），也可以是一个对象（现代用法）。

它的本质是什么？事件注册表。每个 DOM 元素内部维护着一张事件处理器列表。当你调用 addEventListener，浏览器就把你的回调函数塞进这张表里。事件触发时，浏览器遍历这张表，按注册顺序依次执行。

为什么会这样？因为浏览器在插入前会做一次「去重检查」。我遇到过有人在一个循环里反复绑定同一个函数，结果发现只执行了一次——不是 bug，是特性。

3.2 事件处理器注册的两种方式

除了 addEventListener，还有另一种老方式：onclick、onmouseover 这类 DOM 0 级事件处理器。

特性	DOM 0 级（onclick）	DOM 2 级（addEventListener）
绑定方式	属性赋值	方法调用
多处理器支持	❌ 只能绑定一个	✅ 可绑定多个
移除方式	赋值为 null	removeEventListener
捕获阶段支持	❌ 不支持	✅ 支持
this 指向	元素本身	元素本身（箭头函数除外）

我个人习惯：永远用 addEventListener。DOM 0 级最大的坑就是「覆盖」——你永远不知道别人是不是已经绑了 onclick。我曾经在一个团队协作项目里，因为两个同事分别给同一个按钮写了 onclick，结果后写的覆盖了先写的，线上 bug 查了一下午。

3.3 匿名函数 vs 命名函数

这是面试常考题，也是实际开发中容易踩坑的地方。

匿名函数

button.addEventListener('click', function() {
  console.log('我被点击了');
});

优点：简洁、就地定义、不污染作用域。
缺点：无法移除。因为 removeEventListener 需要传入同一个函数引用，而匿名函数没有名字，你拿不到它的引用。

命名函数

function handleClick() {
  console.log('我被点击了');
}

button.addEventListener('click', handleClick);
// 后续可以移除
button.removeEventListener('click', handleClick);

优点：可复用、可移除、调试时堆栈信息清晰。
缺点：需要额外定义，可能造成命名冲突。

我个人的经验法则：

• 一次性绑定（比如页面初始化时的固定交互）→ 匿名函数没问题
• 需要动态绑定/解绑（比如模态框的打开关闭）→ 必须用命名函数
• 回调逻辑超过 5 行 → 建议提取为命名函数，保持代码可读性

3.4 第三个参数：options 的妙用

现代浏览器支持传入对象作为第三个参数：

element.addEventListener('click', handler, {
  capture: false,    // 是否在捕获阶段触发
  once: true,        // 只执行一次，自动移除
  passive: false     // 是否不调用 preventDefault
});

这里有个小技巧：once: true 特别适合「一次性交互」，比如新手引导的「我知道了」按钮。我以前都是手动 removeEventListener，现在一个属性搞定。

3.5 事件监听的核心流程

下面这张图展示了从注册到触发的完整链路：

3.6 实际项目中的选择策略

说了这么多理论，实际项目中到底怎么选？我总结了一个简单的决策表：

场景	推荐方式	理由
页面初始化固定交互	匿名函数	简洁，不需要解绑
动态组件（弹窗、轮播）	命名函数	组件销毁时需要解绑
高频事件（scroll、resize）	命名函数 + passive	性能优化 + 可解绑
一次性交互（新手引导）	匿名函数 + once:true	自动解绑，代码最简
需要捕获阶段拦截	命名函数 + capture:true	明确控制事件流阶段

嗯，这里要注意一点：箭头函数作为事件处理器时，this 指向的是定义时的上下文，而不是元素本身。如果你需要访问 event.target 或 this 指向元素，用普通函数更稳妥。