← Back tothis vs that

event bubbling vs capturing

Written byPhuoc Nguyen

Category

DOM

Created

27 Aug, 2020

Last updated

05 Jan, 2021

Contributors

To demonstrate the difference between event bubbling and capturing modes, let's take an example where we have two HTML elements, one is inside another.

Both elements handle the `click` event. To make it simple, we use an inline onclick attribute to handle the event:

<div id="parent" onclick="console.log('parent clicked')">
    <!-- Parent node -->
    <div id="child" onclick="console.log('child clicked')">
        <!-- Child node -->
        Child
    </div>
</div>

Now we have two different handlers. Clicking the child node would perform these handlers in different orders based on which mode we want the event to be executed in.

In bubbling mode, which is the default mode, the event will be triggered at the deepest element. Then it will be bubbled up to the its parents.

Clicking the child node will print `child clicked`, and then `parent clicked`.

In capturing mode, the order is opposite. The handler will be invoked from the parent element first, then down to the its children.

We can force the event to be fired in the capturing mode by passing the third parameter of `addEventListener(event, handler, useCapture)` to `true`.

Let's revisit the example by using `addEventListener()`:

document.getElementById('parent').addEventListener(
    'click',
    () => {
        console.log('parent clicked');
    },
    true
);

document.getElementById('child').addEventListener('click', () => {
    console.log('child clicked');
});

If we click the child node, the listener of parent node is fired first, and then the child node's listener. The Console window will output as follow:

parent clicked children clicked

#Good practice

It is not recommended to register the event handler via the element attributes such as `onclick`. For more details, check out the addEventListener() function vs onproperty.

#Good to know

The capturing mode does not happen for some special events (`focus`, for example) and on IE < 9.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

event bubbling vs capturing

#Good practice

#Good to know

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔