【js篇】addEventListener()方法的参数和使用

在现代 Web 开发中，事件处理是实现用户交互的核心机制。addEventListener() 是 JavaScript 中用于绑定事件监听器的标准方法，它比传统的 onclick 等内联事件属性更加灵活、强大且符合现代开发规范。

本文将深入讲解 addEventListener() 的语法、参数、使用场景以及最佳实践。

---

✅ 一句话总结

addEventListener() 用于为元素绑定事件处理函数，支持多个监听器、事件捕获/冒泡控制，并避免了传统事件绑定的覆盖问题。

---

✅ 一、基本语法

element.addEventListener(event, handler, options);
// 或
element.addEventListener(event, handler, useCapture);

🔹 参数说明

参数	类型	必填	说明
event	String	✅	事件类型，如 'click'、'mouseover'、'keydown' 等
handler	Function	✅	事件触发时执行的回调函数
options / useCapture	Object 或 Boolean	❌	可选配置，控制事件行为

---

✅ 二、参数详解

1. event：事件类型

常见的事件类型包括：

• 鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout
• 键盘事件：keydown、keyup、keypress
• 表单事件：submit、change、input、focus、blur
• 页面加载：load、DOMContentLoaded、beforeunload
• 自定义事件：通过 CustomEvent 创建

button.addEventListener('click', handleClick);
input.addEventListener('input', handleInput);
window.addEventListener('scroll', handleScroll);

---

2. handler：事件处理函数

事件处理函数接收一个 事件对象（Event Object） 作为参数，包含事件的详细信息。

function handleClick(event) {
  console.log('点击了元素');
  console.log('事件类型:', event.type);
  console.log('目标元素:', event.target);
  console.log('当前元素:', event.currentTarget);
  
  // 阻止默认行为（如链接跳转）
  event.preventDefault();
  
  // 阻止事件冒泡
  event.stopPropagation();
}

✅ 推荐使用具名函数或箭头函数：

// 使用箭头函数
button.addEventListener('click', (e) => {
  console.log('按钮被点击');
});

---

3. 第三个参数：options 或 useCapture

这是 addEventListener 最灵活的部分，有两种写法：

方式一：布尔值 useCapture

• false（默认）：在冒泡阶段执行监听器
• true：在捕获阶段执行监听器

// 冒泡阶段（推荐大多数情况）
elem.addEventListener('click', handler, false);

// 捕获阶段
elem.addEventListener('click', handler, true);

方式二：配置对象 options

elem.addEventListener('click', handler, {
  capture: false,     // 是否在捕获阶段执行
  once: false,        // 是否只执行一次
  passive: false      // 是否为"被动"监听器（不能调用 preventDefault）
});

🔹 once: true

监听器只执行一次，执行后自动移除。

button.addEventListener('click', () => {
  alert('这只会弹出一次！');
}, { once: true });

✅ 适用于一次性操作，如首次引导、防重复提交等。

🔹 passive: true

告诉浏览器该监听器不会调用 preventDefault()，从而提升滚动等事件的性能。

// 提升滚动性能（尤其在移动端）
window.addEventListener('touchstart', handleTouch, { passive: true });

⚠️ 如果在 passive 监听器中调用 preventDefault()，浏览器会发出警告。

---

✅ 三、与传统事件绑定的对比

特性	addEventListener	onclick 等属性
可绑定多个监听器	✅ 是	❌ 否（会覆盖）
支持事件捕获	✅ 是	❌ 否
可配置 once、passive	✅ 是	❌ 否
更清晰的解绑方式	✅ removeEventListener	✅ onclick = null
符合现代标准	✅ 推荐	❌ 不推荐

// ❌ 传统方式（会覆盖）
button.onclick = () => console.log('第一次');
button.onclick = () => console.log('第二次'); // 覆盖了第一次

// ✅ addEventListener（可共存）
button.addEventListener('click', fn1);
button.addEventListener('click', fn2); // 两个都会执行

---

✅ 四、如何移除事件监听器？

使用 removeEventListener()，必须传入相同的函数引用。

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

button.addEventListener('click', handleClick);
// 移除
button.removeEventListener('click', handleClick);

⚠️ 下面写法无法移除：

// ❌ 匿名函数无法移除
button.addEventListener('click', () => console.log('hello'));
button.removeEventListener('click', () => console.log('hello')); // ❌ 不生效

✅ 解决方案：使用具名函数或变量保存引用。

---

✅ 五、一句话总结

addEventListener 是现代事件绑定的标准方式，支持灵活的参数配置（如 once、passive），避免事件覆盖，推荐在所有项目中使用。

---

💡 最佳实践

1. 优先使用 addEventListener ，避免 onclick 等内联属性；
2. 为监听器命名或保存引用，便于后续移除；
3. 合理使用 once：用于一次性事件（如引导、防抖）；
4. 在滚动/触摸事件中使用 passive: true，提升性能；
5. 注意 this 指向 ：使用箭头函数或 .bind() 控制上下文；
6. 及时清理事件：在组件销毁或页面跳转前移除监听器，防止内存泄漏；

// 示例：组件卸载时清理
window.addEventListener('beforeunload', cleanup, { once: true });

function cleanup() {
  button.removeEventListener('click', handleClick);
  window.removeEventListener('scroll', handleScroll);
}