The interactivity on webpages in the browser happens with the help of JavaScript. Javascript calls every action that happens on the webpage as an event. There's a way how events get propagated in different directions in the DOM(Document Object Model) tree.
<blockquote>
Event bubbling in Javascript refers to the way how events get propagated from the innermost element to the outermost element of the DOM often the <code>document</code>.
</blockquote>
<h2 style="text-align: center;">Event bubbling in JavaScript</h2>
When an event happens on an element, the event handler attached to that element runs first, then parent's handler and followed by all other ancestors' handlers. This is what bubbling in JavaScript is.
Let's understand it better with the help of a simple example.
<pre class="language-javascript"><code>&lt;article onclick="alert('article')"&gt;
 &lt;section onclick="alert('section')"&gt;
 &lt;div onclick="alert('div')"&gt;Text to click&lt;/div&gt;
 &lt;/section&gt;
&lt;/article&gt;
</code></pre>
When you run the above code snippet in the browser and click on the text, you can see an <a href="https://devapt.com/javascript-popup-boxes" target="_blank" rel="noopener">alert box</a> with <code>div</code> message, followed by another alert with <code>section</code> message and it is followed by another alert with <code>article</code> message.&nbsp;
And that shows clearly that our event of clicking is propagating up and triggering other event handlers on the parent and ancestor elements of <code>div</code>. And this even propagation won't stop until the <code>article</code> element, it keeps going and going until it reaches <code>html</code> element and then to the <code>document</code> object.
Event bubbling is the default behaviour in JavaScript and it has various use cases, like sometimes analytic tools want to capture user moments, clicks etc and all such things happen because of event bubbling.&nbsp;
Similar to bubbling there's another concept called event capturing and this works opposite to bubbling.
In bubbling events propagate from the innermost element to the outermost parent and in capturing events propagate from the outermost parent to the innermost element.
<h2 style="text-align: center;">Stop event bubbling in Javascript</h2>
It's very simple to stop event bubbling on an element that is to stop triggering the handlers of its parent and ancestor elements.
Let's see the same example to stop this bubbling.
<pre class="language-javascript"><code>&lt;article onclick="alert('article')"&gt;
 &lt;section onclick="alert('section')"&gt;
 &lt;div onclick="event.stopPropagation()"&gt;Text to click&lt;/div&gt;
 &lt;p&gt;Paragraph text&lt;/p&gt;
 &lt;/section&gt;
&lt;/article&gt;</code></pre>
In the above code snippet we have added <code>event.stopPropagation()</code> on the div handler and a new paragraph of text.&nbsp;
When you click on the div text, nothing happens because we are preventing the event from bubbling, but when you click the paragraph text it bubbles up and triggers the <code>section</code> and <code>article</code> elements' handlers.&nbsp;
And that's so simple to prevent even bubbling. But in most cases, you don't need to prevent this bubbling of events, and only under specific scenarios you need this <code>stopPropagation</code> method for stopping the bubbling.
<pre class="language-javascript"><code>&lt;div onclick="event.stopPropagation()"&gt;Text to click&lt;/div&gt;</code></pre>
The way we have handled the event on <code>div</code> element is the old style of running event handlers and it's not an effective way to handle events like this.&nbsp;
<h2 style="text-align: center;">Preferred way to handle events</h2>
The preferred way to handle events on any elements is by using <code>addEventListener</code> method on it.
<pre class="language-javascript"><code>document.addEventListener(event, function, useCapture);</code></pre>
<ul>
<li>event - type of the event to listen e.g., click, mouseover etc</li>
<li>function - function to run after the event occurs</li>
<li>useCapture - boolen(default false), if true event propagation happens from parent to the innert most element(child)</li>
</ul>
So let's see this by considering an example
<h3>Event bubbling and capturing with addEventListener</h3>
<pre class="language-javascript"><code>// Event bubbling
&lt;section&gt;
 &lt;div&gt;Text to click&lt;/div&gt;
&lt;/section&gt;

&lt;script&gt;
const section = document.querySelector('section');
const div = document.querySelector('div');

div.addEventListener('click', (e) =&gt; alert('From div'));
section.addEventListener('click', (e) =&gt; alert('From section'));
&lt;/script&gt;</code></pre>
In this event bubbling happens when you click the div text, the event gets propagated to the <code>section</code> handlers and triggers it.
To reverse the event bubbling to go from parent to child, you can just enable the useCapture flag on the parent element.
<pre class="language-javascript"><code>// Passing third argument with true, 
// enables the section handler to trigger first before div
section.addEventListener('click', () =&gt; alert('From section'), true);</code></pre>
<h3>Stop event propagation with addEventListener</h3>
To stop the event propagation just call the <code>stopPropagation</code> method on the event object of the element you want.
<pre class="language-javascript"><code>const section = document.querySelector('section');
const div = document.querySelector('div');

div.addEventListener('click', (e) =&gt; {
 e.stopPropagation(); // stops propagation to its parent element
 alert('From div');
});

section.addEventListener('click', () =&gt; alert('From section'));</code></pre>
This time when you click the div text, only the div handler runs and there won't be any alert message from <code>section</code> handler.
There's one more method for stopping the propagation of events, it is called <code>stopImmediatePropagation</code> method. This prevents running other handlers when there are multiple event handlers on the same element.&nbsp;
And this is all about event bubbling in Javascript. Event listeners and event handlers are a very broad topic in Javascript and there are so many things that can be discussed related to the events in JS.

Event bubbling in JavaScript is the default behavior of how events propagate from the innermost element to the outermost parent. Here are all the details.

Posts tagged with Event-Bubbling

Event bubbling in JavaScript all you need to know about