Event Bubbling Vs. Event Capturing
Event bubbling is the default behavior in most browsers. When an event is triggered on an element, it starts at the target element and then bubbles up through its parent elements in the DOM hierarchy, one level at a time, until it reaches the root of the document (the window object).
Click anywhere inside Div
Event Capturing (aka Trickling)
Event capturing is the opposite of bubbling. It's a less common behavior where the event starts from the root of the document and trickles down through the DOM hierarchy to the target element. However, it's important to note that not all browsers support event capturing by default.
With the above code, if you click on the "Inner div," you'll see both event handler outputs in the console, but in the opposite order compared to event bubbling:
You can use the event.stopPropagation() method within an event handler to prevent further propagation in either the bubbling or capturing phase. This can be useful to stop an event from triggering other handlers in the propagation chain.
In this case, if you click on the "Inner div," only the handler for the "Inner div" will run.
Understanding event bubbling and capturing is crucial for controlling how events propagate through the DOM and for managing interactions within complex structures of HTML elements. It allows you to create more organized and efficient event handling in your web applications.