{"id":18106,"date":"2017-01-10T19:29:24","date_gmt":"2017-01-10T19:29:24","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=18106"},"modified":"2017-05-30T08:39:06","modified_gmt":"2017-05-30T08:39:06","slug":"dom-event-propagation-javascript-capturing-bubbling-explained","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/dom-event-propagation-javascript-capturing-bubbling-explained\/","title":{"rendered":"DOM Event Propagation with JavaScript – Capturing and Bubbling Explained"},"content":{"rendered":"
Basic Terms Explained<\/h2>\n
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.<\/p>\n
\n
Event propagation – An overarching term that includes the three different phases of DOM Events: capturing, targeting and bubbling.<\/li>\n
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.<\/li>\n
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.<\/li>\n
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.<\/li>\n<\/ul>\n
Event Propagation, Capturing and Bubbling Video<\/h2>\n