Events are actions occurring on a webpage due to various types of interaction from the user. These include interactions such as mouse click, keypress, scroll, resize, etc. The user interactions are usually performed on an HTML element, and when any type of interaction is performed, an event is fired. This event will simply follow its life cycle(event propagation) unless an event-handler is registered to perform any operation in response to the event.

The standard DOM Events has 3 phases of event propagation:

• Event Capturing phase: the event goes down to the element.
• Event Target phase: the event has reached the element.
• Event Bubbling phase: the event is bubbled up from the element.

Note that not every DOM event bubbles up. There are some exceptions to this. The focus event doesn’t bubble up the DOM tree.

In this article, we will understand the life cycle of the events, the execution phase of event handlers, and how to manipulate default browser behavior when an event is fired.

#javascript #webdev