determine event path in DOM Event bubbling

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 IE and Edge trailing behind with no foreseeable support, and MDN agrees.

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

^{Details correct September 25, 2019}

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>

I had a similar requirement where I was listening to event on document and wanted to know if the event originated in a particular div. I handled it by adding and later checking a specific class name on event.target.

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('via-div1')) {
    alert('Event came through div1');
  } else if (e.target.classList.contains('via-div2')) {
    alert('Event came through div2');
  } else {
    alert('Event came from outside the divs');
  }
});

div1.addEventListener('click', function(e) {
  e.target.classList.add('via-div1');
});

div2.addEventListener('click', function(e) {
  e.target.classList.add('via-div2');
});

<div id="div1" style="background: #8bc34a"><span>div 1</span></div>
<div id="div2" style="background: #00bcd4">
  <span>div 2</span>
  <div id="div2-1"><span>div 2-1</span></div>
  <button id="btn2-2">button 2-2</button>
</div>

function handleClicks(e) {
    var path = [];
    var node = e.target;
    while(node != document.body) {
       path.push(node);
       node = node.parentNode;
    }
    console.log(path);
}

document.body.addEventListener('click', handleClicks);