Basic Terms Explained

Event propagation is an important yet little understood topic. In this post and related video we will go in depth into event propagation, explaining the terms capturing and bubbling and showing examples of when and how to use each.

• Event propagation – An overarching term that includes the three different phases of DOM Events: capturing, targeting and bubbling.
• Capturing Phase – When an event occurs in the DOM, notification of the event is passed starting at the top of the DOM tree and passing down through all parent element nodes all the way to the target node where the event occurred.
• Target Phase – After the capturing phase occurs, the Target phase occurs. The target phase only includes a notification of Node where the event took place.
• Bubbling Phase – This is the final phase to occur, although many people think this is the first phase. In the bubbling phase a notice is passed from the target Node up through all of the parent Nodes all the way back to the top root of the DOM.

Event Propagation, Capturing and Bubbling Video

Code Samples Used: Download

Taking it Further with Learning JavaScript

Now that you have learned the basics of event propagation it is important for you to build out a demo like the one you have seen in the video above.

If this content was a little advanced for you, you can go back and watch our Introduction to JavaScript Events video. Or if you’re looking to take things further, check out our Local Storage video.

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about Events and much much more!!!