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

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 (eg, 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中冒泡和捕獲事件的事件？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！