# Bubbling in JavaScript

Bubbling is a concept in JavaScript that is very important when we are defining the actions that our applications should take in response to the occurrence of specific events.

Last week, I discussed the power that comes with making a parent element an event listener [here](https://pamilerinf.hashnode.dev/a-more-efficient-way-of-adding-event-listeners). When you make the parent element and its children elements event listeners, you will notice that if the child experiences an event, the event handling functions that you have written for the child element and its parent element will be triggered. This is the effect known as **bubbling** in JavaScript.

Let's consider this structure: a calculator is inside a circle called "tools":

```
<div id="tools" class="orangeCircle">
     <div id="calculator" class="calc">
          <div id='button0' class="numberButton">0</div>
          <div id='button1' class="numberButton">1</div>
          <div id='button2' class="numberButton">2</div>
          //The rest of the buttons
     </div>
</div>
``` 

Now, let's add button0 and each of the parent elements above as event listeners: 

```
document.getElementById('button0').addEventListener('click', function(event) { console.log("You've clicked " + event.target); } );
document.getElementById('calculator').addEventListener('click', function(event) {
console.log("You've clicked " + event.target + "on the " + event.currentTarget);     
});
document.getElementById('tools').addEventListener('click', function(event) {
console.log("You've clicked " + event.target + "on the " + event.currentTarget + ". Yahoo!");
});

``` 
 On the console, three messages will be printed if button 0 is clicked:
> 
<p>You've clicked button0</p>
<p>You've clicked button0 on the calculator</p>
<p>You've clicked button0 on the tools. Yahoo!</p>
> 

But if the calculator is clicked without touching any of the buttons that have been added as event listeners (in this case, button0), these messages will be printed:
> 
<p>You've clicked calculator on the calculator</p>
<p>You've clicked calculator on the tools. Yahoo!</p>
> 

And if you click on the parent element of the calculator without touching the calculator...
> 
<p>You've clicked tools on the tools. Yahoo!</p>
> 

The event *bubbles* up the elements all the way until it reaches the html element. The event handlers of the deepest element that experienced the event run first, and then its parent's event handlers run, then that element's parent's event handlers run, all the way up until there are no more elements to bubble up to.
As we can see in the above example, if button0 is clicked then the event handlers of the button0, calculator and tools elements run, in that order. If the calculator is clicked where there are no child elements that are event listeners, then only the calculator and tools elements' event handlers will run, in that order. If only the tools element is clicked, then only the tools element's event handlers will run.

You may have also noticed the target and currentTarget properties of the event object.
There is a key difference between the two: *event.target* refers to the deepest element the event occurred on, while *event.currentTarget* refers to the element that the event is currently on. You can think of event.currentTarget as similar to the this keyword.
Thus, when button0 was clicked, *event.target* referred to button0 in all the event handlers, while *event.currentTarget * referred to the element of that event handler.

This could prove to be useful, but sometimes we don't want it.
To stop the bubbling at a certain level, you can use the function *event.stopPropagation()* in the event handling function of the element you want the bubbling to stop at.
The above function will only stop that specific event handler from running. If you have multiple handlers on that element, they would still run if you only used *event.stopPropagation()* at that one handler. To stop bubbling and prevent all handlers of that element from running, you use the *event.stopImmediatePropagation()* function.

Thanks for reading!
Until next week,
Pamilerin