应使用 addEventListener 而非 onclick 赋值，因其支持多监听器、捕获/冒泡控制、事件委托及可移除性；e.target 与 e.currentTarget 区分实际点击元素与绑定元素；移动端优先用 touchstart 避免 click 延迟。
事件监听用 addEventListener，不是直接赋值 onclick
绝大多数情况下，应该用 addEventListener 绑定点击等交互事件。直接写 button.onclick = handler 看似简单，但会覆盖之前绑定的同类型监听器，且无法控制捕获/冒泡阶段。
常见错误现象：多个模块都试图给同一个按钮加点击逻辑，结果只有最后一个生效。
- 推荐写法：
button.addEventListener('click', function(e) { console.log('clicked'); }); - 支持第三个参数控制事件流：
{ capture: true }进入捕获阶段，{ once: true }自动解绑一次后监听 - 避免用
onclick属性或 HTML 内联写法（如<button onclick="doSomething()"></button>），不利于维护和测试
点击事件对象 e 里藏着关键信息
回调函数接收的事件对象 e 不只是个“通知”，它提供用户操作的上下文，比如点击位置、触发元素、是否被阻止默认行为等。
使用场景：区分左键/右键、阻止表单提交、获取点击坐标、判断是否点在某个子元素上。
立即学习“Java免费学习笔记（深入）”；
-
e.target是实际被点击的最深 DOM 节点（可能是<span></span>，不是<button></button>） -
e.currentTarget才是绑定监听器的那个元素（通常是<button></button>） -
e.button === 0表示左键，e.button === 2是右键；e.preventDefault()可阻止链接跳转或表单提交 - 移动端注意：
click有约 300ms 延迟，高频交互建议用touchstart或pointerdown
事件委托靠 event.target 和父级监听实现
动态添加的按钮（比如列表项渲染后插入），不需要每个都单独绑定 addEventListener。只要给父容器绑定一次，再通过 e.target 判断来源即可。
性能影响：100 个按钮各自监听，比 1 个父级监听 + 条件判断开销更大；兼容性无问题，所有现代浏览器都支持。
- 示例：给
<ul id="list"></ul>绑定，点击任意<li>都能响应document.getElementById('list').addEventListener('click', function(e) { if (e.target.tagName === 'LI') { console.log('clicked on li:', e.target.textContent); } }); - 注意不要漏掉
e.target可能是<li>的子元素（比如<span></span>），可用e.target.closest('li')安全匹配 - 避免过度委托：深层嵌套或高频触发区域（如画布）不适合，可能增加判断负担
移除监听器必须用相同引用，匿名函数无法清除
如果后续需要取消监听（比如组件卸载、状态切换），用匿名函数绑定就彻底失去控制权。
容易踩的坑：反复调用绑定却没清理，导致同一逻辑执行多次；或误以为 removeEventListener 能清掉内联 onclick —— 实际不能。
- 正确做法：把处理函数定义为具名变量或 const 引用
const handleClick = () => { /* ... */ }; button.addEventListener('click', handleClick); // 后续可精确移除 button.removeEventListener('click', handleClick); -
addEventListener的第三个参数（如{ capture: true }）也必须完全一致才能成功移除 - Vue/React 等框架中，生命周期钩子（如
useEffect的 cleanup 函数）自动帮你做了这一步，但原生 JS 必须手动管理
事件机制本身不复杂，难的是对 target/currentTarget 的直觉理解、委托时的边界判断，以及监听器生命周期的显式控制——这些地方出错，往往表现为“点了没反应”或“点一次触发多次”，调试时得先看绑定方式和移除逻辑。
