最稳妥的按钮点击绑定方式是addeventlistener('click', handler)，因其支持多次绑定、互不覆盖且可移除；需确保dom加载完成，动态元素应使用事件委托；关键操作用click，快速反馈可结合pointerdown；务必显式移除监听器防内存泄漏。
用 addEventListener 绑定按钮点击最稳妥
直接写 onclick 属性或赋值 element.onclick = handler 虽然能用，但不推荐——它只能绑定一个处理函数，后续赋值会覆盖前面的；而 addEventListener 支持多次调用、互不干扰，也方便后期移除（比如用 removeEventListener）。
常见错误现象：document.getElementById('btn').onclick = handleClick; 写了两次，第二次直接把第一次干掉了；或者在模块化代码里多个文件都试图绑定同一个按钮，结果只有最后一个生效。
- 始终优先用
addEventListener('click', handler)，别图省事写onclick - 确保 DOM 已加载完成再绑定，否则
getElementById返回null，调用addEventListener会报错Cannot read property 'addEventListener' of null - 如果按钮是动态插入的（比如通过 AJAX 加载），不能在初始化时直接绑定，得用事件委托（见下一条）
动态生成的按钮要用事件委托
页面刚加载时不存在的按钮，querySelector 找不到，自然绑不了事件。这时候不能等它出现再手动 bind，而是把监听器挂到它的某个稳定父容器上，靠事件冒泡捕获点击。
使用场景：表格行末尾的“删除”按钮、评论列表里的“点赞”、Tab 切换后新渲染的表单控件。
立即学习“前端免费学习笔记（深入）”；
- 选一个始终存在且不会被替换的父级元素，比如
document.body或某个id="list-container"的<div> <li>监听父元素的 <code>click，然后用event.target判断是否点中了目标按钮：document.getElementById('list-container').addEventListener('click', function(e) { if (e.target.matches('button.delete-btn')) { handleDelete(e.target.dataset.id); } }); - 避免用
document.body做委托目标——太宽泛，可能误伤其他点击；也别用document，某些低版本 iOS Safari 对它支持不稳定 - 需要快速视觉反馈？可以同时监听
pointerdown（加 class）和click（执行逻辑） - 兼容 IE10/11？用
MSPointerDown回退，但更建议统一用click，除非有明确的性能瓶颈 - 别在
pointerdown里直接发请求或改状态——松手位置偏了、被系统拦截（比如滚动）、甚至用户只是想拖动页面，都会让操作不完整 - 给 handler 起名或存为变量，移除时才能对应上：
function handleClick() { ... } btn.addEventListener('click', handleClick); // 销毁时 btn.removeEventListener('click', handleClick); - 委托场景下，移除的是父元素上的监听器，不是按钮本身（按钮可能早没了）
- 现代框架（React/Vue）通常自动处理，但纯 JS 操作 DOM 时，务必在合适时机（比如组件
unmount、destroy钩子）显式调用removeEventListener
注意 click 和 pointerdown 的行为差异
移动端长按、缩放、双击等操作会让 click 延迟约 300ms 触发（为判断是否双击），而 pointerdown 是即时响应的。但 pointerdown 不是所有老浏览器都支持，且语义不同：它表示“手指/鼠标按下”，不等于“用户意图确认操作”。
性能 / 兼容性影响：单纯做按钮点击反馈（比如变色、弹 toast），用 pointerdown 更跟手；但涉及表单提交、跳转、数据修改等关键动作，必须用 click，否则可能在用户松手前就触发了，导致误操作。
别忘了移除监听器防止内存泄漏
单页应用（SPA）里频繁切换页面或组件，如果绑了事件又不清理，旧的 handler 会一直持有对 DOM 节点或闭包变量的引用，导致无法被 GC 回收。尤其当 handler 里用了 this 或外部变量时，问题更隐蔽。
容易踩的坑：用匿名函数绑定，比如 btn.addEventListener('click', function() { ... })，之后没法精准移除；或者组件销毁时只清了部分监听器，漏掉委托在父级上的那个。
最麻烦的不是写监听，是理清楚谁该在什么时候解绑——尤其是嵌套委托、异步加载、条件渲染混合在一起的时候，一个漏掉，就可能让按钮点十次才响应一次，或者点着点着发现内存占用越来越高。
