事件监听器是长期挂载在元素上的响应机制，核心用addEventListener()实现；它允许多个监听器共存、独立注册移除，支持捕获阶段控制，而onclick赋值会覆盖先前逻辑。
addEventListener() 实现。
为什么必须用 addEventListener()，而不是 onclick = ...？
直接赋值 onclick 会覆盖之前的所有处理逻辑，哪怕只是多加一行统计代码，也可能让 UI 交互失效：
const btn = document.querySelector('button');
btn.onclick = () => console.log('A');
btn.onclick = () => console.log('B'); // ← A 被彻底干掉，只输出 B
addEventListener() 则允许多个监听器共存，互不干扰：
btn.addEventListener('click', () => console.log('A'));
btn.addEventListener('click', () => console.log('B')); // A 和 B 都会执行
- 每个监听器独立注册、独立移除，适合模块化开发（比如一个组件加日志，另一个加动画）
- 支持
useCapture参数控制捕获阶段，对嵌套结构的事件流有精细控制权 - IE6–8 不支持，但现代项目基本无需兼容；若真要保老版本，得用
attachEvent()回退（已废弃，不推荐）
removeEventListener() 移不掉？多半是函数引用不对
这是最常踩的坑：用匿名函数注册，就永远没法精准移除：
btn.addEventListener('click', () => console.log('hello'));
btn.removeEventListener('click', () => console.log('hello')); // ❌ 失败！两个箭头函数不是同一个引用
正确做法是把处理函数定义为具名函数或变量：
立即学习“Java免费学习笔记（深入）”；
function handleClick() { console.log('hello'); }
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // ✅ 成功
- 如果用箭头函数，必须提前存成变量：
const handler = () => {...}; addEventListener(..., handler); - 移除时参数必须完全一致：事件名、函数引用、
useCapture值三者缺一不可 - 不及时移除可能造成内存泄漏，尤其在单页应用中反复创建/销毁组件时
事件对象 event 里哪些属性最常用？
回调函数自动接收一个 event 对象，它不只是“发生了什么”，更是“怎么发生的”：
-
event.target：真正被点击/触发的底层元素（比如你点的是按钮里的，它就是那个span） -
event.currentTarget：绑定监听器的那个元素（即btn），通常等同于this -
event.preventDefault()：阻止默认行为，比如表单提交跳转、链接跳页、空格键滚动页面 -
event.stopPropagation()：中断冒泡，避免父级监听器也被触发（慎用，容易破坏预期交互）
键盘事件还额外提供 event.key（字符）、event.code（物理键位），区分大小写和修饰键更可靠。
监听全局事件（如 window 或 document）要注意什么？
它们生命周期长、作用域广，容易引发意料外的重复执行或内存滞留：
- 尽量用
{ once: true }选项实现“只执行一次”，比如加载完成后的初始化： window.addEventListener('load', initApp, { once: true });- 监听
resize或scroll时务必防抖，否则高频触发会卡死页面 - 组件卸载前（如 React 的
useEffect清理函数、Vue 的beforeUnmount）必须手动removeEventListener()
事件监听器本身不复杂，但它的“长期驻留”特性，决定了写的时候要像管理数据库连接一样——注册了，就得想着怎么安全释放。
