JavaScript事件是交互的触发机制，需用addEventListener绑定并确保DOM就绪；阻止默认行为用e.preventDefault()；重复触发常因监听器重复添加，可用once选项或事件委托解决。
JavaScript 事件不是“要学的概念”，而是你写交互时**绕不开的触发机制**——按钮点不点得响、表单提不提交、键盘按没按下，全靠它响应。
什么是事件监听器（addEventListener）？
它是现代浏览器处理事件的标准方式，比直接写 onclick 属性更灵活、可复用、支持多次绑定。
常见错误现象：button.onclick = handler 被重复赋值，后一次覆盖前一次；或在 DOM 加载完成前就尝试绑定，报 Cannot read property 'addEventListener' of null。
- 必须确保元素已存在：用
document.addEventListener('DOMContentLoaded', ...)或把脚本放</body>前 - 推荐始终用
addEventListener，不用内联onclick属性 - 第三个参数常设为
false（冒泡阶段触发），除非你明确需要捕获阶段
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function(e) {
console.log('按钮被点了', e.target);
});
点击事件里怎么阻止默认行为？
当按钮在 <form> 里，或带 href="#" 的链接被点击时，会触发页面跳转或表单提交——这不是你想要的“纯交互”。
立即学习“Java免费学习笔记（深入）”；
关键就是调用 e.preventDefault()，它只影响当前事件的默认动作，不影响其他逻辑。
- 必须在事件回调函数中调用，不能写在外部
- 不要和
return false混用：return false在addEventListener中**不会**阻止默认行为，仅在 jQuery 或内联onclick中有效 - 如果同时要阻止冒泡，加
e.stopPropagation()
form.addEventListener('submit', function(e) {
e.preventDefault(); // 否则页面会刷新
// 这里做 AJAX 提交
});
为什么点一次却触发了多次？
最常见原因是：事件监听器被重复添加，比如在函数里反复调用 addEventListener，又没清理旧的。
典型场景：模态框反复打开关闭、单页应用路由切换后重新绑定、或者在循环中为多个按钮绑定却没隔离作用域。
- 检查是否在
for循环中直接用var声明变量——会导致闭包共享同一个i - 绑定前可先用
removeEventListener清理，但要注意函数引用必须完全一致（不能用匿名函数） - 更稳妥的做法：用事件委托（绑定到父容器），或用
once: true选项（只触发一次）
btn.addEventListener('click', handleClick, { once: true });
真正麻烦的不是写不对，而是没意识到事件绑定是“有状态的”——它会累积、会泄漏、会在 DOM 变更后失效。调试时先查 getEventListeners(element)（Chrome 控制台命令），比猜快得多。
