事件在DOM中的傳播分為捕獲和冒泡兩個(gè)階段，答案是：1. 事件捕獲從外層向內(nèi)層傳遞，2. 事件冒泡從內(nèi)層向外層傳遞，3. 完整流程為捕獲階段→目標(biāo)階段→冒泡階段，4. 可通過stopPropagation等方法控制流程，5. 實(shí)際應(yīng)用包括事件委托和點(diǎn)擊外部關(guān)閉功能，理解二者有助于編寫高效且可預(yù)測(cè)的事件處理代碼。

Event bubbling and event capturing are two phases of event propagation in the DOM (Document Object Model) that determine the order in which elements receive events when a user interacts with nested elements.

Let’s say you have a button inside a div, and both have click event listeners. When you click the button, that click also technically happens on the div — since the button is inside it. So, which event runs first? That’s where event bubbling and capturing come in.

1. Event Bubbling: From Inner to Outer

In event bubbling, the event starts at the innermost target element (like the button) and then bubbles up through its ancestors (parent, grandparent, etc.) until it reaches the root of the document.

Example:

<div id="outer">
  <div id="inner">
    Click me
  </div>
</div>

document.getElementById("inner").addEventListener("click", () => {
  console.log("Inner clicked");
});

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer clicked");
});

When you click on the inner div, you’ll see:

Inner clicked
Outer clicked

This is event bubbling — the event goes from the child to the parent.

? This is the default behavior in most cases.

2. Event Capturing: From Outer to Inner

In event capturing, the event starts from the outermost element and travels down to the target element.

To enable capturing, you pass true as the third argument in addEventListener, or explicitly set the capture option.

document.getElementById("inner").addEventListener("click", () => {
  console.log("Inner clicked");
}, true); // 'true' means useCapture

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer clicked");
}, true);

Now, clicking the inner div will log:

Outer clicked
Inner clicked

Because the event is captured from the top down.

? Capturing happens first, then bubbling (if not stopped).

3. The Full Event Flow: Three Phases

An event actually goes through three phases:

1. Capturing Phase – event goes from window down to the parent of the target.
2. Target Phase – event reaches the target element.
3. Bubbling Phase – event bubbles up from the target to window.

Example:

<div id="grandparent">
  <div id="parent">
    <button id="button">Click</button>
  </div>
</div>

With listeners on all three, and capturing enabled on some:

• Capturing listeners (with true) fire during the capturing phase (top → target).
• Bubbling listeners (default) fire during the bubbling phase (target → top).

4. How to Control the Flow

You can stop propagation at any point:

• event.stopPropagation() – stops the event from moving further in either phase.
• event.stopImmediatePropagation() – also prevents other listeners on the same element from running.

Example:

button.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log("Button clicked, but won't bubble");
});

Now, the parent won’t receive the click event.

Practical Use Cases

• Event Delegation: Use bubbling to attach a single listener on a parent to handle events for many children (e.g., a list with many buttons).
• Click Outside to Close: Attach a capturing listener on the body to detect clicks outside a modal or dropdown.

  document.body.addEventListener("click", (e) => {
    if (!modal.contains(e.target)) {
      modal.close();
    }
  }, true); // Capturing ensures it runs before any inner bubbling listeners

  ---

  In short:

  • Bubbling: Inner → Outer (default).
  • Capturing: Outer → Inner (use true in addEventListener).
  • The full flow is: Capture → Target → Bubble.

  Understanding both helps you write more efficient and predictable event handling code.

  以上是什么是在JavaScript中冒泡和捕獲事件的事件？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！