Bubbling vs Capturing in JavaScript | JavaScript Events Tutorial

When working with events in JavaScript you have the option of using 'bubbling' or 'capturing' to define the order in which the event handlers fire off. In most cases, bubbling is default.

Typically you don't need to worry about capturing unless you need ultimate control over your event handlers. This concept is only relevant if you have a parent element and a child element which both have event listeners.

When using 'bubbling', events are fired off beginning with the child element and then go up to the parent.

In contrast, 'capturing' means that events are fired off from the parent first, and then down to the child element.

In this video I show you a simple example of how these two options differ with a 'paragraph' tag and a 'strong' tag.

For your reference, check this out:
developer.mozilla.org/en-US/docs/Web/API/EventT…

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!