Event Bubbling in JavaScript

I will try to explain about a concept that really helped me when I was creating one of my projects in React.js. So, I thought why not to write about it, in the process I might learn something new as well. So, let me explain the problem that I faced and the solution that helped me out.

So, in the above image there is a left box and the right box and the boxes contains checkboxes. Left box was given an id as left-box and similarly right div was given id as right-box. Simply what I wanted was to know if the checkbox was clicked inside which box the left div or the right one. I really had no idea Javascript has this awesome concept of Bubbling an event, thus I used some query selectors did some manipulations to find out the correct div when the checkbox is clicked. But, recently I came to know about this functionality of Javascript in which if we click a child then the event will be propagated to the Parent component and basically move out, bubbling upwards and this concept was very helpful for the problem I was facing.

Let me share an image of event bubbling looks.

This is how the event bubbling looks, if an event happens in the child it will keep propagating upwards, until the final window object. This particular technique is pretty useful in many scenarios.

Let me share a little code below to explain:

    <div id="parent-div">
      Parent Div
      <div id="child-div">Child Div</div>
    </div>
    <script>
      const parentDiv = document.querySelector("#parent-div");
      const childDiv = document.querySelector("#child-div");
      childDiv.addEventListener("mousemove", () => {
        console.log("Child event occured");
      });
      parentDiv.addEventListener("mousemove", () => {
        console.log("Parent event occured");
      });
    </script>

Window:

Output:

Note: We can prevent this behavior by adding two lines in our listeners.

event.stopPropagation();

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

So, I conclude this article here. This is my first article I hope you might have learned something new and this article might help you in some project.

References: https://www.w3schools.com/jquery/event_stoppropagation.asp https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing