稳！这东西是 JS 事件监听的核心，属于「你不懂它，前端写不顺」系列。咱下面就通俗、系统、加例子地把 addEventListener() 给你讲透。

---

🚨 一、它是干啥的？

element.addEventListener() 是用来 给 DOM 元素绑定事件监听器 的。

也就是说：你点个按钮、鼠标移上去、键盘敲一下……都得靠它监听。

---

🧱 二、基本语法

element.addEventListener(type, listener, options);

参数	类型	含义
type	字符串	要监听的事件名，比如 "click" "input" "keydown" 等
listener	函数	事件发生时要执行的函数（回调）
options	可选对象或布尔	事件的附加配置（比如是否捕获阶段触发）

---

✋ 三、最简单例子

let btn = document.querySelector("#myBtn");

btn.addEventListener("click", function () {
  console.log("按钮被点了");
});

只要你点击 #myBtn，就会打印出一句话。

---

🔁 四、多个事件监听（不会覆盖）

这是它最牛的地方：可以添加多个监听函数，互不覆盖！

btn.addEventListener("click", () => console.log("处理1"));
btn.addEventListener("click", () => console.log("处理2"));

会依次输出：

处理1
处理2

🧨 相比：

btn.onclick = () => console.log("覆盖了");

这个只能绑定一个，新绑定的会把前面的 干掉！

---

🧠 五、options参数详解（第三个参数）

element.addEventListener("click", handler, {
  once: true,
  passive: false,
  capture: false
});

选项	默认值	说明
once	false	只触发一次
passive	false	告诉浏览器：这个监听器不会调用 preventDefault()，可以优化性能（滚动相关）
capture	false	是否在 捕获阶段 执行（默认冒泡阶段）

⚠️ true 等价于 { capture: true }，也就是说：

addEventListener("click", handler, true);

是监听捕获阶段的 click。

---

🧹 六、移除监听器

绑定之后，如果你不想要了，可以用 removeEventListener 移除：

function handleClick() {
  console.log("我点了");
}
btn.addEventListener("click", handleClick);

// 移除监听器
btn.removeEventListener("click", handleClick);

⚠️ 注意：匿名函数移不掉！

// 这就移除不掉
btn.addEventListener("click", () => console.log("点了"));
btn.removeEventListener("click", () => console.log("点了")); // 这不是同一个函数！

---

🔍 七、常用事件类型

类型	触发场景
"click"	鼠标点击
"input"	输入框内容变化
"keydown"	按下键盘
"mousemove"	鼠标移动
"scroll"	页面滚动
"submit"	表单提交
"change"	下拉/单选等改变
"dblclick"	双击

---

🧪 八、进阶用法：传参 + 移除

你可以这么写：

function doSomething(e) {
  console.log("你点的是：", e.target);
}

btn.addEventListener("click", doSomething);
btn.removeEventListener("click", doSomething);

---

✅ 总结口诀版

• 想监听事件：用 addEventListener
• 想多个监听：别用 onclick，用它
• 想解绑事件：保存函数再用 removeEventListener
• 要配置行为：用第三个参数 { once, capture, passive }

想搞清楚事件冒泡、捕获、阻止传播，这个 addEventListener 是个起点。