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）：

• 例如点击一个 ，事件会依次触发：span → div → body → html → document
• 可用 event.stopPropagation() 中断冒泡，防止父级监听器被意外触发
• 注意：event.stopImmediatePropagation() 还能阻止同一元素上其他同类型监听器执行

事件捕获：从外到内的预处理阶段

捕获阶段发生在冒泡之前，事件从 document 开始，逐级向下传递到目标元素。要启用捕获，需在 addEventListener 第三个参数传 true：

• elem.addEventListener('click', handler, true) 表示在捕获阶段监听
• 常用于全局拦截（如权限控制、快捷键统一管理），在事件到达目标前就做处理
• 捕获与冒泡可共存，同一个元素上既可设捕获监听器，也可设冒泡监听器

基本上就这些。掌握事件绑定方式 + 分清冒泡/捕获时机，就能准确响应用户操作，避免误触发或漏响应。