liveBook · Manning

Event.currentTarget

As explained in Web Components in Action

event.currentTarget is the DOM event property identifying the object whose event listener is currently handling the event.

event.currentTarget identifies the object whose listener is handling an event. Unlike event.target, it does not identify where the event originally began. A click on a button can bubble to a document listener, making the document the currentTarget. section 14.3

Document listener and a Web Component

A document-level click listener logs e.target, e.currentTarget, and e.composedPath(). Clicking the component’s button makes the button the target, while document remains the currentTarget. The propagation path includes the button, component, document, and Window. section 14.3

Shadow DOM can hide the internal button from outside listeners: event.target may appear as the Web Component, but event.currentTarget remains the document where the listener was added.

How Web Components in Action covers it

How deep it goes
Defines the property through click examples and contrasts it with target and composedPath, but does not detail event-dispatch internals.
Examples
Uses document click listeners, a custom Web Component button, propagation-path arrays, and Shadow DOM retargeting.
What it assumes
Assumes familiarity with DOM events, event listeners, bubbling, and Web Components while illustrating the property through basic HTML and JavaScript.
What you can do after
Diagnose event propagation by comparing the clicked target with the element whose listener is currently handling the event.
How it connects
Connects event.currentTarget with event.target, event.composedPath(), event bubbling, Web Components, and Shadow DOM.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.