loading...
Cover image for Event Capturing

Event Capturing

bhagatparwinder profile image Parwinder 👨🏻‍💻 ・1 min read

JavaScript with Parwinder (39 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 37 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling

Event capturing is the opposite of Event bubbling. In the case of event bubbling, events bubble up from the element parent and then its ancestors.

In the case of event capturing, it starts from the top, going down the DOM structure until it reaches the target element. The target element is common to bubbling and capturing. Capturing ends at target, and bubbling starts at target.

Event capturing is rarely used. To enable event capturing, we can pass the third parameter to addEventListener.

Example:

const myButton = document.querySelector(".btn-primary");

myButton.addEventListener("click", function() {
    console.log("The button was clicked");
}, { capture : true });

The third parameter set to true enables the capturing phase. Now when an event happens, it starts at the top, trickles down to the target element, and eventually bubbles up.

The third parameter does not need to be an object. It can be a boolean true.

myButton.addEventListener("click", function() {
    console.log("The button was clicked");
}, true);

To summarize, DOM Events have three phases:

  1. Capturing
  2. Target
  3. Bubbling

We can determine the phase we are in by using event.eventPhase or the event handler.

🚨If addEventListener used true as the third parameter for event capturing, we mention the same phase in removeEventListener to remove the handler correctly.

JavaScript with Parwinder (39 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 37 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling

Posted on by:

bhagatparwinder profile

Parwinder 👨🏻‍💻

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide