Event Object

The Event object represents an occurrence detected by the browser and provides information about what happened, where it occurred, and how it is propagating. Frontend code commonly reads properties such as `type`, `target`, and `currentTarget` inside an event handler.

An event is delivered to a listener when something happens, such as a click, key press, form submission, or pointer movement. The handler receives an `Event` object containing information about that occurrence.

`type` identifies the event, such as `click` or `keydown`. `target` is the object where the event originated, while `currentTarget` is the object whose listener is currently running. These can differ when events propagate through the DOM.

Events can propagate through the DOM. During bubbling, an event moves from the originating element toward its ancestors, allowing a parent listener to respond to an event that began on a descendant. `stopPropagation()` prevents further propagation, while `preventDefault()` instead asks the browser not to perform the event's default action when that action is cancelable.

The base `Event` interface contains common event information, while specialized interfaces add properties relevant to particular event types. For example, keyboard events provide key information and pointer events provide pointer coordinates and button data.

A listener can inspect the event object without needing to query the DOM again for basic event information. Understanding `target` versus `currentTarget`, propagation, and default actions is especially important when using event delegation.

Key points

• `type` identifies the kind of event.
• `target` is the event's originating object; `currentTarget` is the object handling the current listener.
• Events can propagate through the DOM, including bubbling.
• `preventDefault()` affects a cancelable default action; `stopPropagation()` affects propagation.
• Specialized event interfaces extend the common event model with additional data.

Interview questions

What is the Event object in JavaScript?

The Event object represents an event detected by the browser and passed to an event listener. It provides common information such as the event `type` and its origin. It also exposes methods related to propagation and default behavior. Specific event types can provide more specialized event objects.

What is the difference between `event.target` and `event.currentTarget`?

`event.target` is the object where the event originated. `event.currentTarget` is the object whose listener is currently executing. They are often the same when a listener is attached directly to the originating element. With event delegation, they commonly differ because a parent handles an event that originated on a child.

What is event bubbling?

Bubbling is a propagation phase in which an event moves from the originating element toward its ancestors. A parent can therefore receive an event that started on a descendant. This behavior enables patterns such as event delegation. Code can stop further propagation when appropriate by calling `stopPropagation()`.

What does `preventDefault()` do, and how is it different from `stopPropagation()`?

`preventDefault()` asks the browser not to carry out a cancelable default action associated with the event. For example, a form submission can be prevented from proceeding. `stopPropagation()` addresses the event's movement through the DOM instead. Calling one does not automatically perform the job of the other.

Why might a frontend developer use event delegation?

Event delegation lets a parent listener handle events originating from its descendants rather than attaching separate listeners to every child. It relies on event propagation, commonly bubbling, and can simplify management of dynamic collections of elements. The handler can inspect `event.target` to determine which descendant initiated the event. The approach requires care when the DOM structure or target element differs from what the handler expects.