click事件监听应优先用addEventListener而非onclick属性，因其支持多绑定、可移除、兼容事件流；动态元素需用事件委托；注意preventDefault与stopPropagation区别；移动端需规避300ms延迟。
click 事件监听器必须用 addEventListener 而不是 onclick 属性
直接赋值 onclick 会覆盖已有处理逻辑，且无法绑定多个响应；addEventListener 支持多次调用、可移除、兼容现代事件流（捕获/冒泡）。尤其在第三方库或动态插入 DOM 的场景下，onclick 属性极易被意外覆盖。
实操建议：
- 始终优先使用
element.addEventListener('click', handler) - 避免
element.onclick = function() {...}或内联 HTML 的onclick="..." - 若需移除，保存 handler 引用：
const handleClick = () => console.log('clicked');<br>btn.addEventListener('click', handleClick);<br>// ...<br>btn.removeEventListener('click', handleClick);
事件委托：给动态生成的按钮绑定 click
直接对尚未存在的元素调用 addEventListener 会失败。正确做法是监听父容器，在事件冒泡阶段判断 event.target 是否匹配目标选择器。
常见错误现象：点击后无反应，控制台无报错，但 document.querySelectorAll('.btn') 返回空数组——说明元素是后来插入的。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 监听存在且不销毁的祖先节点，如
document.body或某个固定<div id="app"> - 用
event.target.matches('.dynamic-btn')判断是否点击了目标元素 - 避免用
event.target.className === 'dynamic-btn'—— class 可能含多个值，易误判
document.body.addEventListener('click', (event) => {<br> if (event.target.matches('.delete-item')) {<br> const id = event.target.dataset.id;<br> deleteItem(id);<br> }<br>});
阻止默认行为和冒泡要分清场景
event.preventDefault() 用于取消链接跳转、表单提交等浏览器默认动作；event.stopPropagation() 阻止事件向上冒泡。两者常被混用或误加，导致预期外的交互失效。
使用场景举例：
- 点击按钮弹出菜单 → 不需要
preventDefault，但可能需要stopPropagation避免触发外层遮罩关闭 - 点击
<a href="#section">实现平滑滚动 → 必须preventDefault，否则页面立即跳转 - 表单内按钮 type="button" 已无默认提交行为，此时
preventDefault多余
移动端 click 有 300ms 延迟，别等它
在 iOS Safari 和部分安卓浏览器中，为支持双击缩放，click 事件会在触摸结束后约 300ms 才触发。用户会感觉“卡顿”或“点不动”。
解决路径只有两条：
- 启用
touchstart替代（注意：需手动处理 touch 移动误触） - 引入
fastclick库或使用现代方案：在<head>加<meta name="viewport" content="width=device-width, initial-scale=1">并确保未禁用缩放（即不含user-scalable=no） - 更稳妥的做法是统一监听
pointerdown（兼容 mouse/touch/pen），并检查event.button === 0排除非主键点击
容易被忽略的一点：即使加了 viewport meta，若页面存在 iframe 且其 content 没设 viewport，仍可能触发延迟。
