Event target
An event target is an object or node associated with an event as its origin or recipient during event dispatch.
Web Components in Action
event.target is the DOM event property identifying the original element on which an event occurred.
- How it is used
- Uses event.target to identify the originating element inside a broad document-level listener.
- How deep it goes
- Explains bubbling, listener targets, complete paths, and Shadow DOM paths through concrete Web Component examples.
- Examples
- Uses a clickable button, a custom element, a document listener, and logged propagation paths.
- What you can do after
- Diagnose event origins and propagation by logging target, currentTarget, and composedPath().
React Quickly, Second Edition
An event target is the DOM node on which a browser event occurred or to which it was dispatched.
- How it is used
- Identifies which DOM node triggered an event so one React handler can serve multiple controls.
- How deep it goes
- Explains target comparisons with refs and distinguishes event types, but defers broader event propagation details.
- Examples
- Uses an increment-and-decrement counter whose shared handler compares event.target with an increment-button ref.
- What you can do after
- Apply it via React event handlers to select an action based on the control that triggered the event.
Read how React Quickly, Second Edition explains event target →
Secrets of the JavaScript Ninja, Second Edition
The object or element on which an event originally occurred and which is exposed through the event object's target reference.
- How it is used
- Identifies the element where an event originated while handlers respond as it propagates through the DOM.
- How deep it goes
- Defines event.target and contrasts it with this during capturing and bubbling.
- Examples
- Uses a button click and nested-container click handlers to distinguish the target from the handler element.
- What you can do after
- Understand which element originated an event and distinguish it from the element handling the event.
Read how Secrets of the JavaScript Ninja, Second Edition explains event target →
Related concepts
- input eventused by · An input event is a browser event dispatched when user input changes the value or content of an editable control.
- event delegationused by · Event delegation is an event-handling technique in which an ancestor handles events from descendant elements through event propagation.
- synthetic eventpart of · A synthetic event is a framework-provided event object that describes an occurrence and exposes related properties to an event handler.
- eventpart of · An event is an occurrence, change, or associated record or notification recognized as significant within a system or context.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.