How Events Travel
When an event fires on an element, it doesn't just stay there. It travels through the DOM tree in two distinct phases.
Phase 1: Capturing (Going Down)
The event starts at the root of the document and travels downward through all ancestor elements toward the target. This phase is rarely used in practice.
Phase 2: Bubbling (Going Up)
After reaching the target, the event travels back upward through all ancestors, all the way up to document. This is the default behavior for almost all events.
Example: If you click a <button> inside a <div> inside a <body>, the click event fires on the button first, then the div, then the body, then the document.
How to Stop It
elem.addEventListener('click', function(event) {
event.stopPropagation(); // The event will NOT travel to parent elements
});
Don't stop propagation without a clear reason. Many third-party scripts and analytics tools rely on events bubbling up to the document level to work correctly. Stopping it unexpectedly can silently break their functionality.