Navigating Event Bubbling and Capturing in Async JS

Master async event handling, avoiding surprises and pitfalls

Photo by Kind and Curious on Unsplash

Asynchronous JavaScript brings forth exciting possibilities but introduces novel challenges related to event bubbling and capturing. Developers need to understand how these mechanisms interact with promises, timers, and generators.

Arm yourself with essential know-how and navigate tricky waters skillfully.

Topic #1: Promises & Event Loop

Promises rely on the event loop to schedule microtasks and resolve values. While no direct link exists between promise chaining and event propagation, understanding their relationship helps build cohesive mental models.

Case Study: Promise Chain vs. Nested Event Listeners

Compare synchronous and asynchronous approaches managing nested elements:

<div id="wrapper">
  <button id="btn">Inner Button</button>
</div>

const wrapper = document.querySelector("#wrapper");
const btn = document.querySelector("#btn");

wrapper.addEventListener("click", () => {
  console.log("Wrapper Clicked.");
});

btn.addEventListener("click", () => {
  console.log("Button Clicked.");
});

Promise.resolve().then(() => console.log("Async Task Completed."));