JavaScript事件监听核心是addEventListener；键盘事件用keydown/keyup并区分event.key与event.code；鼠标事件需按场景选click/mousedown/mousemove等；事件传播分捕获（由外向内）和冒泡（由内向外）两个阶段。
JavaScript 监听键盘和鼠标事件，核心是用 addEventListener 绑定对应事件类型；事件冒泡与捕获则是事件在 DOM 树中传播的两个相反方向，理解它们对精确控制事件响应至关重要。
监听键盘事件的关键点
常用键盘事件有 keydown、keyup 和 keypress（已废弃，不推荐）。现代开发主要用前两者：
-
keydown：按键按下时触发（长按会重复触发） -
keyup：按键松开时触发（只触发一次） - 通过事件对象的
event.key获取按键字符（如"a"、"Enter"），用event.code获取物理键位（如"KeyA"、"Enter"），后者更适合处理组合键或布局无关逻辑 - 若需禁用默认行为（比如阻止输入框中回车提交表单），在事件回调里调用
event.preventDefault()
监听鼠标事件的常用方式
鼠标事件包括 click、mousedown、mouseup、mousemove、mouseenter、mouseleave 等：
-
click是复合事件（先mousedown再mouseup），适合按钮类交互 -
mousedown/mouseup更底层，适合拖拽、画布操作等需要精确时机的场景 -
mousemove触发频繁，建议配合throttle或requestAnimationFrame优化性能 -
mouseenter和mouseleave不会冒泡，且只在真正进入/离开元素边界时触发，比mouseover/mouseout更干净
事件冒泡：从内到外的传播路径
默认情况下，事件执行采用冒泡机制：事件先在目标元素上触发，然后逐级向上传播到父元素、祖先元素，直到 document（甚至 window）：
立即学习“Java免费学习笔记（深入）”；
- 例如点击一个
，事件会依次触发：span → div → body → html → document - 可用
event.stopPropagation()中断冒泡，防止父级监听器被意外触发 - 注意：
event.stopImmediatePropagation()还能阻止同一元素上其他同类型监听器执行
事件捕获：从外到内的预处理阶段
捕获阶段发生在冒泡之前，事件从 document 开始，逐级向下传递到目标元素。要启用捕获，需在 addEventListener 第三个参数传 true：
-
elem.addEventListener('click', handler, true)表示在捕获阶段监听 - 常用于全局拦截（如权限控制、快捷键统一管理），在事件到达目标前就做处理
- 捕获与冒泡可共存，同一个元素上既可设捕获监听器，也可设冒泡监听器
基本上就这些。掌握事件绑定方式 + 分清冒泡/捕获时机，就能准确响应用户操作，避免误触发或漏响应。
