addEventListener是JavaScript中为元素绑定事件监听器的标准方法，支持多监听、灵活选项（如once、capture、passive），需用相同引用函数才能移除。
在 JavaScript 中，addEventListener 是为元素绑定事件监听器的标准方法，比直接写 onclick 等内联属性更灵活、可复用，也支持同时绑定多个相同事件。
基本用法：选中元素 + 指定事件类型 + 传入处理函数
语法结构是：element.addEventListener(eventType, handler, options?)。
-
eventType：字符串，如
"click"、"input"、"keydown"，不带on前缀 - handler：事件触发时执行的函数，可以是具名函数、匿名函数或箭头函数
-
options（可选）：一个对象，常用
{ once: true }（只触发一次）、{ capture: true }（捕获阶段触发）、{ passive: true }（告诉浏览器不会调用preventDefault，提升滚动性能）
常见监听场景示例
比如监听按钮点击、输入框内容变化、回车提交等：
// 监听按钮点击
document.getElementById("myBtn").addEventListener("click", function() {<br>
console.log("按钮被点了");<br>
});
// 监听输入框实时输入（推荐用 input 而非 keyup，兼容中文输入）
document.querySelector("input").addEventListener("input", e => {<br>
console.log("当前值：", e.target.value);<br>
});
// 监听回车键（在 input 或 textarea 中）
input.addEventListener("keydown", e => {<br>
if (e.key === "Enter") {<br>
submitForm();<br>
}<br>
});
注意 this 指向和参数传递
在事件处理函数中，this 默认指向绑定事件的元素（即 element），和使用内联 onclick 一致。如果用箭头函数，this 会继承外层作用域，不再是元素本身，此时建议用 e.target 或 e.currentTarget 获取元素。
立即学习“Java免费学习笔记（深入）”；
-
e.target：实际触发事件的元素（可能为子元素，如点击了 button 内的 span） -
e.currentTarget：绑定事件监听器的那个元素（即你调用addEventListener的那个）
移除监听器：必须用相同引用的函数
如果需要后续取消监听，得用 removeEventListener，但**它要求传入的函数必须与添加时完全相同（同一引用）**，所以不能直接传匿名函数或箭头函数（每次都是新函数）。
// 正确：用具名函数或变量保存函数引用
function handleClick() { console.log("点了一次"); }<br>
btn.addEventListener("click", handleClick);<br>
btn.removeEventListener("click", handleClick); // ✅ 可以成功移除
// 错误：下面这样无法移除
btn.addEventListener("click", () => { ... });<br>
btn.removeEventListener("click", () => { ... }); // ❌ 不同函数引用，无效 
