JavaScript事件绑定是将函数与事件关联以自动执行，事件冒泡指事件从子元素逐级向上传播至document；主流方式有HTML内联、DOM属性绑定和addEventListener（推荐），后者支持多监听与捕获控制。
JavaScript事件绑定就是把函数和某个事件关联起来，让事件发生时自动执行这个函数。事件冒泡是事件传播的一种机制：当子元素上的事件被触发，它会先在子元素上执行，然后逐级向上传播到父元素，直到 document。
常见的事件绑定方式
有三种主流写法，各有适用场景：
-
HTML内联绑定：直接在标签里写
onclick="handleClick()"。简单但不推荐，逻辑和结构混在一起，难维护。 -
DOM属性绑定：比如
btn.onclick = handleClick;。只能绑定一个函数，重复赋值会覆盖前一个。 -
addEventListener()（推荐）：可以给同一个元素绑定多个同类型事件，支持控制是否捕获，更灵活。例如：
btn.addEventListener('click', handleClick, false);
事件冒泡的具体表现
假设有一个嵌套结构：
→ inner 的 click
→ outer 的 click
→ body 的 click（如果绑了）
→ html、document 依此类推。
这是默认行为，大多数鼠标和键盘事件都会冒泡（但 focus、blur、mouseenter、mouseleave 等不会）。
立即学习“Java免费学习笔记（深入）”；
如何阻止冒泡？
在事件处理函数中调用 event.stopPropagation() 即可中断向上传播：
- 只影响当前事件流，不影响同一元素上其他监听器的执行；
- 如果想连捕获阶段也停掉，用
event.stopImmediatePropagation()； - 注意：不要滥用阻止冒泡，它可能影响外层组件（比如弹窗、下拉菜单）的正常关闭逻辑。
顺便提一下事件捕获
事件传播分三个阶段：捕获 → 目标 → 冒泡。捕获阶段从 window 开始，一路向下到目标元素；目标阶段执行目标元素上的事件；冒泡阶段再从目标向上回传。addEventListener 的第三个参数设为 true 就进入捕获阶段监听，比如：outer.addEventListener('click', handler, true);
日常开发中，大部分需求用冒泡阶段就够了，捕获阶段多用于全局拦截（如点击空白处关闭菜单）。
基本上就这些。理解冒泡和正确绑定事件，是写出健壮交互逻辑的基础。
