Events

What are Events in Javascript?

In JavaScript, events are actions triggered by user interactions or system notifications, such as clicking buttons, hovering over elements, typing on keyboards, or resizing browser windows. Using event listeners, JavaScript captures these events and executes predefined code, enabling interactive and dynamic web page behavior. Common event types include mouse, keyboard, form, window, and custom events.

What are the Types of Events?

1. Mouse Events

2. Keyboard Events

3. Form Events

4. Window Events

5. Custom Events

Event Propogation ?

Event propagation refers to the mechanism by which events are transmitted or propagated through the DOM (Document Object Model) hierarchy in a web page. When an event occurs on an element in the DOM, such as a click or a keypress, it typically triggers event handlers attached to that element. However, event propagation also involves how the event moves through the DOM tree, potentially triggering event handlers on ancestor or descendant elements.

There are two main phases of event propagation in the DOM:

1. Capturing Phase (or Capture Phase):

   • During this phase, the event moves from the top of the DOM tree (the root) down to the target element where the event originated.

   • Event handlers attached at higher-level ancestor elements (closer to the root) have an opportunity to intercept the event before it reaches the target element.

   • Capturing phase event handlers are executed in the order of the ancestor elements from the root towards the target element.

2. Bubbling Phase (or Bubble Phase):

   • After the event reaches the target element and triggers its event handlers, it then begins to bubble up through the DOM tree.

   • During this phase, event handlers attached at ancestor elements have an opportunity to respond to the event as it bubbles up.

   • Bubbling phase event handlers are executed in the reverse order of the ancestor elements, from the target element back up to the root.