loading...
Cover image for Event Bubbling

Event Bubbling

bhagatparwinder profile image Parwinder 👨🏻‍💻 ・2 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

Introduction

We talked about events and event handling in the previous post. We can attach handlers to events. These handlers get invoked when the event happens.

Event bubbling in JavaScript means that when an event happens on an element, its handler is invoked, followed by its parents and then the ancestors.

Example:

<div onclick="alert('Click Event Happened')">
    <p>If you have click this paragraph in the browser, the onclick handler of the div will get invoked.</p>
</div>

The click on the paragraph in the example above will invoke the onclick alert from the div. The event has bubbled up from the paragraph to the div element.

This would happen even if we had n number of nested elements with event handlers on them.

Example:

<span onclick="alert('Span Clicked')">
    <div onclick="alert('Div Clicked')">
        <p onclick="alert('Paragraph Clicked')">Click Me.</p>
    </div>
</span>

If we click the paragraph in the above example, it will cause three alerts in the browser window!

Finding the original event element

When an event bubbles through multiple layers, it is hard to keep track of what caused the chain of events. JavaScript makes it easy.

In the above example, if we clicked the paragraph, then the paragraph would be referred to as the target or event.target. No matter how many layers an event bubbles up, the event.target never changes. This tells us the original item where the event happened.

Now let us say that the event has bubbled up, and we want to know the current item in the event bubble chain. That is easy, as well. The keyword this or event.currentTarget will provide you with the current processing element.

How to prevent events from bubbling up?

Events that bubble up will go all the way to <html> element. Some do go to document, and some of them make it to the window object.

If we do not want any handlers from the parent elements to get invoked, use event.stopPropagation().

Example:

<div onclick="alert('This will not alert')">
  <button onclick="event.stopPropagation()">Click me</button>
</div>

If we click the button with stopPropagation(), the div event handler or alert will not get triggered.

How to prevent multiple events on the same element?

There are times when one element could have multiple event handlers on it for one event. We might want to stop bubbling up but also want any other handlers of the element from getting invoked.

event.stopImmediatePropagation() makes sure there is no event bubbling up or any other handle execution on the element.

Why stopping event bubbling could be wrong?

If we have a document level click event listener (for tracking, analytics, or invoking popups), these will not get triggered when the end-user clicks on an element with stopPropagation(). So be careful when we prevent event bubbling. This is just one example, but there could be multiple side effects.

Exceptions to event bubbling

Not all the events bubble. Any event that has to do with one specific element does not bubble. Few such events are:

  • load
  • unload
  • focus
  • blur

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