JavaScript事件绑定是将函数与事件关联以自动执行，事件冒泡指事件从子元素逐级向上传播至document；主流方式有HTML内联、DOM属性绑定和addEventListener（推荐），后者支持多监听与捕获控制。

JavaScript事件绑定就是把函数和某个事件关联起来，让事件发生时自动执行这个函数。事件冒泡是事件传播的一种机制：当子元素上的事件被触发，它会先在子元素上执行，然后逐级向上传播到父元素，直到 document。

常见的事件绑定方式

有三种主流写法，各有适用场景：

• HTML内联绑定：直接在标签里写 onclick="handleClick()"。简单但不推荐，逻辑和结构混在一起，难维护。
• DOM属性绑定：比如 btn.onclick = handleClick;。只能绑定一个函数，重复赋值会覆盖前一个。
• addEventListener()（推荐）：可以给同一个元素绑定多个同类型事件，支持控制是否捕获，更灵活。例如：
  btn.addEventListener('click', handleClick, false);

事件冒泡的具体表现

假设有一个嵌套结构：点我，两个元素都绑定了 click 事件。当你点击 inner 时，会按顺序触发：
→ inner 的 click
→ outer 的 click
→ body 的 click（如果绑了）
→ html、document 依此类推。

这是默认行为，大多数鼠标和键盘事件都会冒泡（但 focus、blur、mouseenter、mouseleave 等不会）。

如何阻止冒泡？

在事件处理函数中调用 event.stopPropagation() 即可中断向上传播：

• 只影响当前事件流，不影响同一元素上其他监听器的执行；
• 如果想连捕获阶段也停掉，用 event.stopImmediatePropagation()；
• 注意：不要滥用阻止冒泡，它可能影响外层组件（比如弹窗、下拉菜单）的正常关闭逻辑。

顺便提一下事件捕获

事件传播分三个阶段：捕获 → 目标 → 冒泡。捕获阶段从 window 开始，一路向下到目标元素；目标阶段执行目标元素上的事件；冒泡阶段再从目标向上回传。addEventListener 的第三个参数设为 true 就进入捕获阶段监听，比如：
outer.addEventListener('click', handler, true);

日常开发中，大部分需求用冒泡阶段就够了，捕获阶段多用于全局拦截（如点击空白处关闭菜单）。

基本上就这些。理解冒泡和正确绑定事件，是写出健壮交互逻辑的基础。