determine event path in DOM Event bubbling

Question

I am trying to find out the path through which an event has bubbled. For example , I have a mark up like

 <div id="container" onclick="func">
        <div id="div1"></div>
        <div id="div2">
            <div id="div2.1"></div>
            <span id="span2.2"></span>
            <div id="div2.3">
                <button id="btn2.3.1"></button>
            </div>
        </div>
    </div>

Now if btn2.3.1 was clicked, I wish to see the entire path the event has bubbled up through which is btn2.3.1 -> div2.3 -> div2 ->container . Is there a way of doing this with only putting a handler on the container ? (No Jquery please)

I found a event.path array.Which does this stuff, but couldn't find much details about it.Is it cross browser? What is the correct way to achieve this ?

Answer 1

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>

Answer 2

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);

Answer 3

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>

Answer 4

There is now a small GitHub project / NPM module called event-propagation-path that acts as a polyfill. Check it out here:

event-propagation-path @ GitHub

event-propagation-path @ NPM

Answer 5

Let's assume that we what to find the event path inside the HTML table tag.

<tabe id="tab">
.
.
.
</table>

The following JavaScript code will return the event's element after every event.

window.onload = function(){
var tab = document.getElementById('tab');
tab.onclick = function(event) {
var target = getTargetElement(event);
console.log(target);
};
}
function getTargetElement(e) {
e = e || window.event;
return e.target || e.srcElement;
}