最常见的原因是元素未加载完成就绑定事件监听器，应确保DOM就绪：将script移至/body前或用DOMContentLoaded事件；addEventListener支持多次绑定，onclick属性会覆盖；stopPropagation阻止冒泡、preventDefault阻止默认行为；事件委托利用冒泡机制监听动态元素。
事件监听器绑定后为什么没触发
最常见的原因是元素还没加载完成就执行了 addEventListener，尤其是操作 document.getElementById 返回 null 时。浏览器解析 HTML 是从上到下，如果脚本写在 <head> 里，而目标元素在 <body> 底部，那绑定必然失败。
解决办法不是靠“等一会儿”，而是确保 DOM 就绪：
- 把
<script>标签移到</body>前 - 或用
document.addEventListener('DOMContentLoaded', ...) - 避免用
window.onload——它要等所有资源（图片、CSS）加载完，太晚
addEventListener 和 onclick 属性的区别
onclick 是 HTML 属性，也是 DOM 元素的 JS 属性，但它只能绑定一个处理函数；addEventListener 支持同一事件多次绑定，互不覆盖。
比如：
立即学习“Java免费学习笔记（深入）”；
btn.addEventListener('click', fn1);
btn.addEventListener('click', fn2); // 两个都会执行
btn.onclick = fn1;
btn.onclick = fn2; // fn1 被彻底替换，不会执行
另外，onclick 属性值必须是函数，不能是字符串（onclick="doSomething()" 是内联 HTML 写法，不推荐）；而 addEventListener 的第二个参数必须是函数引用或箭头函数，不能带括号。
事件冒泡阶段怎么阻止传播又不影响默认行为
event.stopPropagation() 只停冒泡，不影响默认行为（比如点击链接仍会跳转）；event.preventDefault() 只停默认行为，不影响冒泡（父级 click 还会触发）；两者可以同时调用。
常见误用：
- 在表单提交里只调
stopPropagation，结果页面还是刷新了 → 缺少preventDefault - 在委托监听里乱用
stopPropagation，导致父级无法捕获事件 → 实际多数情况不需要它 - 在异步回调里调用
preventDefault（比如 setTimeout 里）→ 失效，因为事件早已结束
事件委托为什么能监听动态添加的元素
因为事件委托不直接绑在子元素上，而是绑在父容器，利用冒泡机制捕获子元素触发的事件。只要父容器存在且监听器没被移除，后续动态插入的子元素也能响应。
关键点：
- 监听器必须绑定在「稳定存在的祖先节点」上，比如
document或某个固定<div id="list"> - 通过
event.target判断真正点击的是哪个子元素，常用event.target.matches('.item') - 别忘了检查
event.target是否为 null 或文本节点（event.target.nodeType === 1更稳妥）
动态添加按钮后无需重新绑定，但如果你用 innerHTML = ... 替换整个父容器内容，那原有监听器还在，只是 DOM 节点被销毁重建了——这点容易被忽略。
