addEventListener支持多次绑定且互不覆盖，onclick属性赋值会覆盖前一次；动态元素需用事件委托；jQuery中应使用on()而非click()；注意this指向差异及内存泄漏风险。
addEventListener 支持多次绑定，onclick 不行
一个按钮可以同时响应多个点击逻辑，但必须用 addEventListener，不能用 onclick 属性或 element.onclick = handler 赋值方式。后者每次赋值都会覆盖前一次，最终只保留最后一个函数。
常见错误现象：btn.onclick = fn1; btn.onclick = fn2; —— 执行后只有 fn2 生效；或者多人协作时，不同模块都写 document.getElementById('save').onclick = saveHandler，结果互相覆盖。
-
addEventListener是“追加式”绑定：调用多次，触发时全部执行 - 每个监听器彼此独立，移除时需用相同函数引用：
removeEventListener('click', fn1) - 避免用箭头函数做监听器（
() => {...}），否则无法精确移除——因为每次定义都是新函数实例 - 若需控制执行顺序，按绑定先后顺序触发；不依赖顺序的逻辑建议拆到 handler 内部协调
动态按钮必须用事件委托，别 forEach 绑定
如果按钮是 AJAX 加载、Vue/React 渲染或 JS 动态插入的，直接 querySelectorAll('.btn').forEach(...) 会漏绑——因为 DOM 还没出现，查不到元素。
正确做法是把监听器挂到父容器（如 <div id="list">），靠事件冒泡捕获点击：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('list').addEventListener('click', function (e) {
if (e.target.matches('button[data-action="delete"]')) {
handleDelete(e.target.dataset.id);
}
if (e.target.matches('button[data-action="edit"]')) {
handleEdit(e.target.dataset.id);
}
});
- 父容器必须始终存在且不被整个替换（
document.body可用但太宽泛，易误触） -
e.target.matches()比e.target.classList.contains()更准，能匹配带属性的选择器 - 不要在委托里写太多
if分支——超过 3 种动作建议用 Map 或 switch 提前映射 handler
jQuery 的 on() 适合已有 jQuery 的项目
如果你的项目已引入 jQuery，on() 是唯一推荐方式，click() 和 bind() 都不支持事件委托，也不能处理未来插入的按钮。
错误写法：$('.btn').click(handler) —— 只绑定当前存在的元素；正确写法：
$(document).on('click', 'button[data-role="submit"]', handleSubmit);
$(document).on('click', 'button[data-role="cancel"]', handleCancel);
- 第一个参数是事件类型，第二个是选择器（必须是字符串），第三个是 handler
- 委托目标别用
$(document)做默认兜底——性能差、iOS Safari 有兼容问题；优先选就近的稳定父级 - jQuery 3.0+ 已移除
live()和delegate()，搜旧教程容易踩坑 - 没引入 jQuery 时硬写
$('...').on()会报$ is not defined
多个事件监听器之间的 this 和 event 参数差异
所有绑定方式中，event 对象内容一致，但 this 指向不同：原生 addEventListener 中 this 是触发事件的 DOM 元素；jQuery on() 中 this 也是该元素；而内联 onclick="handler()" 里 this 是 window（除非显式 bind）。
- 推荐统一用
event.target取点击源，比this更可靠（尤其委托场景下this是父容器） - 需要访问按钮上的自定义数据时，优先用
event.target.dataset.xxx，而非getAttribute() - 移动端注意
click有约 300ms 延迟，快速反馈需求（如游戏按钮）改用pointerdown
真正麻烦的不是“怎么绑多个”，而是“什么时候该解绑”。监听器没清理会造成内存泄漏，尤其是单页应用里反复渲染同一区域时——别忘了在组件卸载或页面切换前调用 removeEventListener 或 jQuery 的 off()。
