JavaScript JavaScript and the DOM Traversing the DOM Using parentNode to Traverse Up the DOM

Traverse vs Event Bubbling

I am totally confused between traverse and event bubbling? Can someone explain please,

1 Answer

Ezell Frazier
Ezell Frazier
22,061 Points

Event Bubbling and DOM Traversal aren't competing against one another. Event Bubbling is part of the concept of DOM Traversal.

If I click a button element within a div, inside of another div, inside of a body tag, I can attach an event listener to the body tag and ask JavaScript to check if that deeply nested button has been clicked.

Event bubbling is similar to dropping a pencil in an empty auditorium. A person at the other end of the auditorium likely heard the pencil drop, as the sound traverses from the point of impact to the listener's ear.

A parent element always has the capacity to listen to any of its child elements, or in the concept of event bubbling, a parent element is the surface of a drink in a glass, and the bubbles are the events traveling to the top.