Specialized Event Interfaces

Specialized event interfaces extend the common `Event` API with properties and methods for particular browser event categories. Use the interface appropriate to the event, and distinguish its event-specific data from propagation details such as `target` and `currentTarget`.

Browser events share the base `Event` interface, which exposes common information and behavior such as `type`, `target`, `preventDefault()`, and propagation controls. Many event categories use specialized interfaces that extend this common API with relevant details.

For example, mouse events commonly use `MouseEvent`, which adds coordinates and button information. Keyboard events commonly use `KeyboardEvent`, with properties such as `key` and `code`; input events can use `InputEvent`, which provides information about changes to editable content. The exact interface depends on the event category and how the event was created.

An event listener receives an event object. In JavaScript, inspect properties appropriate to that event rather than assuming every event has every specialized property. TypeScript can express this distinction with event-specific listener types, though the actual event object is still supplied by the browser.

The event's interface is separate from its propagation path and from the element that received it. A listener may see an event through bubbling or capturing, and `target` may differ from `currentTarget`; specialized fields describe the event itself, not where it is in the propagation process.

Key points

• Specialized event interfaces extend the common `Event` API with category-specific data.
• Use properties that match the event category, such as `clientX` for mouse coordinates or `key` for keyboard input.
• The event object's interface, its `type`, and its propagation path are related but distinct.
• In delegated listeners, distinguish the origin (`target`) from the element running the listener (`currentTarget`).

Interview questions

What is the difference between `Event` and a specialized event interface?

The base `Event` interface contains information and operations common across event categories, such as `type`, `target`, and propagation controls. Specialized interfaces build on that common API with event-specific data. For example, `MouseEvent` adds coordinates, while `KeyboardEvent` exposes keyboard data such as `key`.

How do `KeyboardEvent.key` and `KeyboardEvent.code` differ?

For keyboard input, use properties from `KeyboardEvent`, typically `key` for the meaning of the key press and `code` for the physical key position. They answer different questions: `key` can vary with keyboard layout or modifiers, while `code` identifies a physical key position. Avoid relying on deprecated key-identification properties.

In event delegation, how do `target` and `currentTarget` differ?

In a delegated listener, `target` is the element where the event originated, while `currentTarget` is the element whose listener is currently running. Bubbling lets an ancestor receive many descendant events, so the event's specialized interface remains useful while the propagation path changes. Code should check or narrow the target before assuming it is a particular element type.

How do specialized event interfaces help when writing TypeScript for browser events?

TypeScript can use specialized event types in listener callbacks so that event-specific properties are available with appropriate static checking. The type depends on the API and event name, and custom or manually dispatched events may need their own declared type. Static typing does not validate runtime data, so code should still account for the actual event source and target.