event.path || event.composedPath()

event.path

Dis/Un-covered by a note in the polymer project documentation and via an HTML5Rocks article, path is a family tree in the form of an Array.

It appears to be an "extension to the event interface" only exposed via the Web Component Shadow DOM, and is standard only in this respect (apparently), not a lot of documentation seems available, and it isn't exposed (by default) in all browsers.

event.composedPath() to the rescue!

Another question about the use of path was answered with a suggestion to use composedPath...

MDN's documentation about event.composedPath() describes it as follows:

The composedPath() method of the Event interface returns the event’s path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.

It is described by WHATWG in their "DOM specs" documentation about the "event path" as follows:

Returns the invocation target objects of event’s path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root’s mode is "closed" that are not reachable from event’s currentTarget.

Can I use... states that browser support of composedPath() is widespread, with all modern major browsers supporting its use, and MDN agrees.

WHATWG's documentation about "dispatching events" details the conditions under which "event's path" will have items appended.

^{Details correct December 30, 2022}

Practical demo

const green = document.getElementById( 'green' ),

      msg = document.querySelector( 'output' );



document.getElementById( 'red' ).addEventListener( 'click', evt => {

  msg.innerHTML = '' + evt.target.id + ' got poked, and green was' +

  

  /* access to the event path */

  ( ~evt.composedPath().indexOf( green ) ? '' : <b>n't</b> )

  

  + ' in the path.';

} );

div { display: inline-block; padding: 1em 3em 1em 1em; cursor: pointer }

output { font-family: monospace; display: block; margin-top: 1em }

#red { background: red }

#green { background: green }

#blue { background: blue }

<div id=red>

  <div id=green>

    <div id=blue></div>

  </div>

</div>

<output>Poke the DOM!</output>