现代事件绑定首选 addEventListener，支持多监听器、可移除、语义清晰；避免 onclick 属性或赋值覆盖；动态元素需事件委托；慎用 preventDefault 和 stopPropagation；移动端可禁用缩放消除 click 延迟。
直接用 addEventListener，别用 onclick 属性
现代 JavaScript 事件绑定首选 addEventListener，它支持多个监听器、可移除、语义清晰。用 onclick="..." 或 element.onclick = function() {...} 会覆盖已有监听器，且不利于解耦。
- 多个点击逻辑可以共存：同一个元素能同时绑定登录检查、埋点上报、动画触发三个
click监听器 - 方便后期清理：调用
removeEventListener时需传入相同函数引用，匿名函数无法移除 - 避免 HTML 和 JS 混写：
onclick属性把行为逻辑塞进标签，破坏关注点分离
注意事件委托——动态添加的元素点不了？
如果元素是后续通过 innerHTML、appendChild 或框架（如 Vue/React）动态插入的，直接对它们调用 addEventListener 会失败——因为执行时 DOM 还不存在。
- 解决方案：在父容器上监听，用
event.target判断是否命中目标 - 例如给所有未来可能出现的
.delete-btn绑定删除逻辑：document.querySelector('#list').addEventListener('click', function(e) { if (e.target.classList.contains('delete-btn')) { // 执行删除 } }); - 慎用
body或document做委托根节点，可能因事件冒泡延迟或误触影响性能和准确性
event.preventDefault() 和 event.stopPropagation() 别乱用
点击 时想阻止跳转？点击按钮时不想让事件冒泡到父层弹窗？这两个方法很常用，但容易误判场景。
-
preventDefault()只阻止默认行为（如链接跳转、表单提交），不影响事件传播；不加它，点击后页面就刷了 -
stopPropagation()阻止冒泡，但不会阻止同一阶段其他监听器执行；如果父层有遮罩关闭逻辑，而你无脑加了它，遮罩就关不掉了 - 调试技巧：在监听器开头加
console.log(e.type, e.target)，确认事件来源和当前目标再决定是否干预
移动端 click 有 300ms 延迟？用 touchstart 替代要小心
在 iOS Safari 等浏览器中，click 事件为兼容双击缩放，会等待 300ms 确认是否为双击操作，造成点击卡顿。有人直接换成 touchstart，但会引发新问题。
立即学习“Java免费学习笔记（深入）”；
-
touchstart在手指刚接触屏幕就触发，用户滑动时也会触发，导致误操作 - 更稳妥的做法是禁用缩放：
，此时click延迟消失 - 如需更高响应速度，推荐使用
fastclick库或现代方案：CSS 的touch-action: manipulation（对按钮类元素生效）
:active 样式或者 pointer-events: none 防连点，比修事件逻辑还管用。 
