Create event propagations using JavaScript’s event bubbling and capturing methods to avoid firing a child and parent element simultaneously. Learn how event bubbling and capturing work, how to listen for propagations, and how to add it to your application with an example.

If an element and its parent have an event handler for the same event, which element will fire first when triggered?

Propagating events in JavaScript using bubbling and capturing provides developers with an answer to this question. In this article, we’ll learn how event bubbling and capturing work, compare different methods for accessing event properties, and run through a few different examples and use cases.

Let’s get started!

---

• What is event capturing?
• What is event bubbling?
• Listening to propagation events
  • Capture value is empty
  • Capture value is true
• Accessing event object properties
• Event bubbling structure
  • Nested DOM structure
  • Attach event listener to button
• Stopping the propagation
  • Prevent browser default
• Event bubbling use case
• Event capturing structure
• Event capturing use case

#javascript