JavaScript事件是用户交互的触发机制，需用addEventListener监听，支持多绑定、捕获/冒泡控制；注意DOM加载时机、事件委托、移动端优化及监听器移除技巧。
JavaScript 中的事件不是“要学的概念”，而是你写交互时绕不开的触发机制——比如用户点按钮、输文字、页面加载完，都会自动发出事件，你的代码只要提前“监听”它，就能响应。
什么是事件监听器（addEventListener）
它是现代浏览器处理事件的标准方式，取代了老旧的 onclick="..." 内联写法和直接赋值 element.onclick = function() {...}。核心优势是：一个元素能绑定多个监听器，且可精确控制捕获/冒泡阶段。
- 必须传入两个必要参数：
事件类型字符串（如"click"、"input"）和回调函数 - 第三个可选参数可以是布尔值（旧写法）或配置对象（推荐），例如
{ once: true, passive: true } - 别在循环里反复调用
addEventListener却不存引用——容易重复绑定，导致点击一次触发多次
点击事件常见错误：为什么 click 没反应？
不是代码写错了，往往是元素还没加载完就去绑事件，或者目标元素压根没被正确选中。
-
document.getElementById("btn")返回null？检查 JS 是否在 DOM 渲染前执行——把脚本放</body>前，或用DOMContentLoaded事件包裹 - 动态生成的按钮（比如用
innerHTML插入）？直接绑定会失效，改用事件委托：document.body.addEventListener("click", e => { if (e.target.matches(".dynamic-btn")) { ... } }) - 移动端点不灵敏？可能是
click有约 300ms 延迟，换成"touchstart"或加passive: false配置（注意滚动冲突）
如何安全移除点击监听器
不能用匿名函数绑定后再想移除——因为没有引用，removeEventListener 找不到它。必须用具名函数或保存函数引用。
立即学习“Java免费学习笔记（深入）”；
const handleClick = () => console.log("clicked");
button.addEventListener("click", handleClick);
// 后续可移除：
button.removeEventListener("click", handleClick);
- 如果用了箭头函数，必须提前赋值给变量，否则无法移除
- 用
once: true配置更省心：绑定即自动销毁，适合只执行一次的操作（如初始化） - 组件卸载（如 React useEffect cleanup）时务必移除，否则可能引发内存泄漏或对已销毁 DOM 的操作
事件机制本身不难，难的是判断该在哪个时机监听、监听谁、是否需要阻止默认行为或冒泡——这些细节一旦漏掉，调试起来比逻辑错误还费时间。
