Ответ 1

event.path || event.composedPath()

event.path

Отключено/не включено примечанием в документации проекта полимера и через статью HTML5Rocks, path - это семейное дерево в форме Array.

Похоже, что это "расширение интерфейса event", доступное только через Веб-компонент Shadow DOM, и является стандартным только в этом отношении (по-видимому), не так много документации доступно, и это не отображается (по умолчанию) во всех браузерах.

event.composedPath() на помощь!

На другой вопрос об использовании path был дан ответ с предложением использовать composedPath...

Документация MDNо event.composedPath() описывает это следующим образом:

Метод composedPath() интерфейса Event возвращает путь событий, который является массивом объектов, для которых будут вызываться прослушиватели. Это не включает узлы в теневых деревьях, если теневой корень был создан с закрытым ShadowRoot.mode.

Он описан WHATWG в их документации "спецификации DOM" о "пути событий" следующим образом:

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

Могу ли я использовать... заявляет, что поддержка браузера composedPath() широко распространена, IE и Edge отстают без ожидаемой поддержки, и MDN соглашается.

В документации WHATWG о "отправке событий" подробно описываются условия, при которых к "событию path" будут добавляться элементы appended.

^{Details correct September 25, 2019}

Практическая демонстрация

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>

Ответ 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);

Ответ 3

В настоящее время существует небольшой модуль проекта /NPM GitHub, называемый event-propagation-path, который действует как polyfill. Посмотрите здесь:

путь распространения событий @GitHub

путь распространения событий @NPM

Ответ 4

Предположим, что нам нужно найти путь к событию внутри тега HTML-таблицы.

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

Следующий код JavaScript будет возвращать элемент события после каждого события.

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