JavaScript事件是用户或浏览器触发的通信机制，通过addEventListener绑定可避免覆盖、支持多监听和精确移除；需善用event对象属性（如target、preventDefault）、事件委托及语义化API（如key而非keyCode）。
JavaScript 事件是用户操作或浏览器自身触发的信号，比如点击、键盘输入、页面加载完成。它本身不是“东西”，而是一种通信机制——让代码能“听到”并响应这些信号。
事件监听器用 addEventListener 而不是 onclick 属性
直接写 element.onclick = handler 看似简单，但会覆盖之前绑定的同类型事件；addEventListener 支持多次添加、可选捕获阶段、还能用 removeEventListener 精确移除。
常见错误：用字符串形式的内联事件（如 ），这会让逻辑和结构混在一起，调试困难，也无法传参或复用。
- 推荐写法：
button.addEventListener('click', function() { console.log('被点了'); }); - 支持一次绑定多个事件：
input.addEventListener('input', handleInput); input.addEventListener('blur', handleBlur); - 注意：如果用箭头函数绑定，
this不再指向触发元素，需改用event.target
事件对象 event 是关键入口
回调函数里拿到的 event 参数，不只是“发生了什么”，还包含触发源、坐标、按键码、是否默认行为被阻止等信息。
立即学习“Java免费学习笔记（深入）”；
典型误用：忽略 event.preventDefault() 导致表单提交刷新页面，或右键菜单弹出；或者没用 event.stopPropagation() 造成事件冒泡干扰父级逻辑。
-
event.target是真正触发事件的元素（可能嵌套很深） -
event.currentTarget是当前绑定监听器的元素（即this） - 表单输入类事件（
input、change）优先监听input，它比change更及时 -
键盘事件中，
event.key比event.keyCode更语义化且兼容性更好（后者已废弃）
事件委托靠 event.target 和选择器判断
给动态添加的元素（比如 AJAX 加载的新列表项）逐个绑事件不现实，也容易内存泄漏。事件委托利用冒泡，在父容器统一监听，再根据 event.target 判断是否匹配目标。
常见陷阱：用 event.srcElement（IE 旧属性，现代环境应统一用 event.target）；或没做 nodeType 检查，把文本节点当成了按钮。
- 示例：为所有 class 为
delete-btn的按钮委托删除逻辑list.addEventListener('click', function(event) { if (event.target.classList.contains('delete-btn')) { const item = event.target.closest('.list-item'); item.remove(); } }); - 注意：委托不适用于不冒泡的事件（如
focus、blur），得用focusin/focusout
事件处理真正的复杂点不在语法，而在时机判断和边界控制——比如防抖节流要不要加、异步操作中事件是否还在有效上下文、移动端 touch 和 click 的兼容处理。这些细节往往要等线上报错才暴露。
