事件监听必须用addEventListener，因其支持多次绑定、捕获/冒泡控制（third param）、once/passive等选项；scroll等高频事件需节流/防抖/rAF优化；注意target与currentTarget区别；兼顾键盘操作与无障碍访问。
事件监听器必须用 addEventListener，别再直接赋值 onclick
直接写 element.onclick = handler 看似简单，但会覆盖之前绑定的同类型事件，且无法控制捕获/冒泡阶段。实际项目中几乎总是要用 addEventListener。
关键点：
-
addEventListener支持多次调用，互不干扰 - 第三个参数传
{ once: true }可自动解绑执行一次的事件 - 传
true进入捕获阶段（比如想在父元素先拦截点击），默认false是冒泡阶段 - 移动端要注意
touchstart和click的 300ms 延迟，可用{ passive: true }提升滚动性能（但不能在该回调里调用preventDefault）
避免事件频繁触发：节流、防抖、requestAnimationFrame 各有适用场景
像 scroll、resize、mousemove 这类事件每秒可能触发几十次，不加控制容易卡顿或重复执行逻辑。
怎么选：
立即学习“Java免费学习笔记（深入）”；
- 用户拖拽调整尺寸、实时校验输入？用
debounce（等停顿后再执行） - 滚动到底部加载更多？用
throttle（固定频率执行，比如每 100ms 最多一次） - 动画相关（如跟随鼠标旋转）？优先用
requestAnimationFrame，它和屏幕刷新率同步，比setTimeout更平滑
示例：防止 scroll 过载
let isScrolling;
window.addEventListener('scroll', () => {
if (!isScrolling) {
requestAnimationFrame(() => {
// 实际处理逻辑
console.log('滚动位置：', window.scrollY);
isScrolling = false;
});
isScrolling = true;
}
});
事件对象里的 target 和 currentTarget 经常被搞混
当事件冒泡时，event.target 指的是**最初触发事件的元素**（比如你点的是按钮内的图标），而 event.currentTarget 是**当前绑定监听器的那个元素**（比如监听在按钮上，那它就是按钮）。
常见误用：
- 用
event.target做条件判断却没考虑子元素，结果点击文字时逻辑失效 - 想阻止冒泡却只写了
event.stopPropagation()，忘了某些场景需要event.stopImmediatePropagation()（阻止同一事件阶段的其他监听器） - 用
event.preventDefault()阻止表单提交或链接跳转时，没确认事件类型是否支持（比如div上的click没默认行为，调了也没用）
现代交互要考虑可访问性：键盘操作、焦点管理、role 属性不能少
仅靠鼠标点击实现交互，在键盘用户或读屏软件下会完全不可用。比如自定义下拉菜单，如果没处理 Enter、Space、ArrowDown 键，或者没用 tabindex="0" 让元素可聚焦，就等于关上了半扇门。
必须检查的几件事：
- 所有可交互元素要有明确的
role（如role="button"、role="menuitem"） - 用
focus()主动管理焦点，尤其在模态框打开/关闭时 - 监听
keydown而非click处理快捷键，且要兼容Enter和Space（按钮语义） - 禁用状态用
aria-disabled="true"而不只是 CSS 灰掉，否则读屏器读不出来
复杂交互里，事件逻辑和 DOM 状态容易脱节——比如按钮已禁用，但点击事件仍被监听并执行。这类问题往往到测试阶段才暴露，得从一开始就让事件响应和 UI 状态严格对齐。
