事件监听器重复绑定导致多次触发的主因是未清理旧监听器，解决需用同一函数引用配对add/removeEventListener；事件委托应使用e.target.closest()精确匹配；阻止默认行为必须显式调用e.preventDefault()。
事件监听器重复绑定导致多次触发
最常见的问题是每次执行初始化逻辑时都调用 addEventListener，但没清理旧监听器。比如在函数内反复调用、组件重渲染时未销毁、或 AJAX 回调里重复绑定——结果是点击一次，回调执行 N 次。
解决方法不是“加个 flag 判断是否绑过”，而是明确生命周期：如果监听器只应存在一次，就只在入口处绑定一次；如果需动态控制，用 removeEventListener 配对移除（注意：必须传入**同一个函数引用**，不能传匿名函数或新箭头函数）。
- ✅ 正确写法：
const handler = () => console.log('clicked');<br>element.addEventListener('click', handler);<br>// 后续可安全移除<br>element.removeEventListener('click', handler); - ❌ 错误写法：
element.addEventListener('click', () => console.log('clicked'));—— 无法移除，且每次调用都新增一个监听器 - ⚠️ 特别注意：Vue/React 中的 useEffect 或 mounted 钩子若未 return 清理函数，也会积累监听器
事件委托时 target 判断不严谨
用 document.addEventListener('click', ...) 做委托很常见，但很多人直接写 if (e.target.className === 'btn') 就执行逻辑，这会漏掉子元素（比如按钮里有 <span>文字</span>，点击文字时 e.target 是 span，不是 btn）。
真正要判断的是“事件是否发生在某个选择器匹配的元素或其后代上”，应该用 e.target.closest('.btn')。
立即学习“Java免费学习笔记（深入）”；
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
-
e.target.closest('.btn')返回最近的匹配祖先（包括自身），返回null表示不匹配 - 避免用
e.target.matches('.btn *')——*不合法，且 matches 不查祖先 - 如果委托到
ul上监听li点击，用e.target.closest('li')比检查nodeName和className组合更可靠
阻止默认行为却忘了 preventDefault() 调用时机
比如给表单内的按钮加 click 监听器并想阻止提交，但写了 if (cond) return; 就结束，没调 e.preventDefault() —— 表单照样提交。
关键点：只要你想阻断浏览器默认行为（链接跳转、表单提交、右键菜单、空格触发 checkbox 等），就必须显式调用 e.preventDefault()，而且要在条件成立后、函数返回前执行。
- ✅ 正确：
form.addEventListener('submit', e => {<br> if (!validate()) {<br> e.preventDefault(); // 必须在这里<br> showErrors();<br> }<br}); - ❌ 错误：
button.addEventListener('click', e => {<br> if (e.target.matches('[data-confirm]')) {<br> if (!confirm('确定？')) return; // ❌ 链接仍会跳转<br> }<br});—— 应该在 confirm 前或后加e.preventDefault() - ⚠️ 注意：某些事件（如
keydown的space）默认行为可能延迟触发，preventDefault必须在同步阶段调用
使用 passive: true 后又调用 preventDefault() 导致警告
移动端滚动优化常用 { passive: true }，但一旦设了它，再在回调里调 e.preventDefault() 就会报错：Unable to preventDefault inside passive event listener。
这不是 bug，是浏览器强制的性能保护。所以必须提前规划：哪些事件需要阻止默认（如 touchmove 实现下拉刷新），就别加 passive: true；哪些纯监听（如记录滚动位置），可以放心加。
- 滚动类交互中，
touchstart和touchmove通常不能设 passive，否则无法阻止原生滚动 -
scroll事件本身没有默认行为，加passive: true安全，还能提升性能 - Chrome DevTools 的 “Rendering” 面板里勾选 “Scrolling performance issues”，能高亮出被动监听器里误调
preventDefault的地方
