addEventListener是唯一推荐方式，因它支持同一事件多监听、控制捕获/冒泡阶段、可精准移除、兼容性好且为现代框架底层依赖；e.target是实际触发元素，e.currentTarget是绑定监听器的元素；异步操作前需检查DOM存在性。
JavaScript事件监听器不是“绑上就自动运行”，而是浏览器在特定条件满足时，按规则把事件对象分发给匹配的回调函数——没监听，它就直接丢弃；监听了但写错 preventDefault() 或搞混 e.target 和 e.currentTarget，行为就会出人意料。
为什么 addEventListener 是唯一推荐方式？
它解决了内联写法（onclick="..."）和直接赋值（el.onclick = fn）的根本缺陷：
- 支持同一元素、同一事件类型绑定多个监听器，互不覆盖
- 能控制事件流阶段：捕获 or 冒泡（靠第三个参数
{ capture: true }或布尔值） - 可精准移除：
removeEventListener('click', handler)，前提是函数引用一致 - 兼容性好（IE9+），且现代框架/库底层全依赖它
const btn = document.getElementById('submit');
btn.addEventListener('click', () => console.log('第一响应'));
btn.addEventListener('click', () => console.log('第二响应')); // ✅ 两个都执行
e.target 和 e.currentTarget 总是分不清？
这是事件委托和动态绑定中最常翻车的地方：
-
e.target是**真正被点击/触发的最深子元素**（比如你点的是按钮里的<span>） -
e.currentTarget是**当前执行这个监听器的那个元素**（也就是你调用addEventListener的那个 DOM 节点） - 在事件委托场景下，
e.target帮你定位具体子项，e.currentTarget确保你操作的是委托容器
const list = document.getElementById('myList');
list.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点中了列表项:', e.target.textContent);
}
});
监听器里异步操作后 DOM 已消失？
比如在 fetch 回调里更新一个可能已被移除的节点，会报 Cannot set property 'textContent' of null：
立即学习“Java免费学习笔记（深入）”；
- 不要假设监听器执行期间 DOM 一定还在
- 在异步回调开头加一层存在性检查：
if (!e.currentTarget.isConnected) return; - 更稳妥的做法是监听器本身也做清理：用
{ once: true }或手动removeEventListener - 避免用箭头函数当监听器——它让
this指向全局，拿不到绑定元素
function handleSave(e) {
if (!e.currentTarget.isConnected) return;
fetch('/api/save').then(() => {
e.currentTarget.textContent = '已保存';
});
}
btn.addEventListener('click', handleSave);
真正难的不是写上 addEventListener，而是理解事件对象怎么流动、监听器何时失效、以及回调里那几行代码到底作用在谁身上——这些细节不抠清楚，调试时花半天也找不到为什么点了没反应，或者点了两次才生效。
