JavaScript事件如何绑定_事件冒泡是什么？

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

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

常见的事件绑定方式

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

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

事件冒泡的具体表现

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

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

立即学习“Java免费学习笔记（深入）”；

标签： javascript java html 事件冒泡 win 键盘事件 事件捕获