addEventListener()是首选，因其支持多次绑定、捕获/冒泡控制、可移除；需传同一函数引用才能清除，匿名函数无法移除；passive:true提升滚动性能；事件委托通过父节点监听+event.target匹配实现，避免重复绑定；须重视监听器生命周期管理以防内存泄漏。
JavaScript 事件处理程序不是“绑”得越多越好，而是要选对方式、时机和作用域。直接用 onclick 属性或 element.onclick = handler 最快，但灵活性差、覆盖风险高；用 addEventListener() 才是现代标准做法，支持多次绑定、捕获/冒泡控制、可移除。
为什么 addEventListener() 是首选
它不覆盖已有监听器，允许同一事件多个处理函数共存，还能精确控制事件流阶段（捕获 or 冒泡），且可通过 removeEventListener() 清理——这对单页应用、动态 DOM 尤其关键。
- 必须传入**同一个函数引用**才能成功移除，匿名函数无法被清除
- 第三个参数是布尔值或选项对象：
{ capture: true, once: true, passive: true }，其中passive: true能提升滚动性能（尤其移动端） - IE8 及更早版本不支持，如需兼容，得回退到
attachEvent()（已废弃，不建议新项目用）
onclick 属性和 onclick 属性赋值的区别
两者都只支持一个处理函数，后赋值会覆盖前一个，但来源不同：
-
<button onclick="handleClick()">：HTML 属性，执行时this指向全局对象（非元素本身），且字符串求值有安全与调试隐患 -
btn.onclick = handleClick;：JS 属性赋值，this正确指向按钮元素，但依然只能存一个函数 - 若写成
btn.onclick = function() { ... };，每次赋值都会创建新函数，旧的无法回收，也难移除
事件委托怎么用 addEventListener() 实现
把事件监听器绑定在父容器上，利用事件冒泡识别真实目标，适合动态增删子元素的场景（如列表项、表格行）。
立即学习“Java免费学习笔记（深入）”；
- 监听父节点：
list.addEventListener('click', handleListClick) - 在处理函数中用
event.target判断是否匹配目标（比如event.target.matches('li.delete')） - 避免在
event.target上直接调用方法前未做类型检查，比如event.target.remove()会报错如果点的是文本节点 - 不需要给每个子元素单独绑定，DOM 更新也不用重绑，性能和维护性都更好
真正容易被忽略的不是语法，而是事件监听器的生命周期管理——没清理的 addEventListener() 在组件卸载后仍可能触发，造成内存泄漏或报错。尤其是闭包里引用了外部变量、又没配 once: true 或手动移除时，问题会在稍复杂的交互中突然暴露。
