What is an event flow

Event flow refers to the order in which events are handled in the browser when a user interacts with elements on a webpage like clicking, typing, hovering, etc.

When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event for each of its parent elements first, starting at the top with the global window object.

Hence, there are three phases in JavaScript’s event flow:

1. Event Capturing(Top to Bottom): The event starts from the window/document and moves down the DOM tree toward the target element.

2. Target phase: The event reaches the target element — the element that was actually interacted with.

3. Event Bubbling(Bottom to Top): The event then bubbles back up from the target element to the root.