Event flow in JavaScript

I was going to write a series of posts about event handling, but LOL, it turns out I didn't quite understand how event flow works in JavaScript. Let me show you what I learned from my research.

There are three distinct phases an event goes through:

1. Capture
2. Target
3. Bubble

Here's a bit more info, taken directly from the UI Events spec:

1. The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.
2. The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble, then the event object will halt after completion of this phase.
3. The bubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.

The spec even provides a really handy diagram to illustrate this:

The Bubbling and capturing lesson from JavaScript.info really helped me understand this process. Go check it out! ❤️