确定 DOM 事件冒泡中的事件路径

Question

我试图找出事件冒泡的路径。例如，我有一个标记像

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

现在，如果单击 btn2.3.1，我希望看到事件冒泡的整个路径，即 btn2.3.1 -> div2.3 -> div2 ->container 。有没有办法只在容器上放置一个处理程序？ （请不要使用 Jquery）

我找到了一个 event.path 数组。这是什么东西，但找不到更多关于它的详细信息。它是跨浏览器的吗？实现这一目标的正确方法是什么？

Answer 1

event.path || event.composedPath()

event.path

通过polymer project documentation 和通过an HTML5Rocks article 中的注释Dis/Un-covered，path 是Array 形式的家谱。

它似乎是“event 接口的扩展”仅通过 Web ComponentShadow DOM 公开，并且是标准 仅在这方面（显然），似乎没有很多可用的文档，并且它没有在所有浏览器中（默认情况下）公开。

event.composedPath() 救援！

另一个question about the use of path 是answered with a suggestion to use composedPath...

MDN的documentation about event.composedPath()是这样描述的：

Event 接口的composedPath() 方法返回事件的路径，该路径是一个对象数组，将在其上调用侦听器。如果影子根是在其 ShadowRoot.mode 关闭的情况下创建的，则这不包括影子树中的节点。

WHATWG在their "DOM specs" documentation about the "event path"中描述如下：

返回事件的路径的invocation target对象（将在其上调用侦听器的对象），除了shadow trees中的任何nodes，其中shadow root的mode已“关闭”，无法从事件的 currentTarget 访问。

Can I use... 表示 browser support of composedPath() 很普遍，IE 和 Edge 落后，没有可预见的支持，MDN 同意。

WHATWG's documentation about "dispatching events" 详细说明了“事件的path”将具有项目appended 的条件。

^{详情正确，2019 年 9 月 25 日}

实用演示

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

我有一个类似的要求，我正在收听文档上的事件并想知道该事件是否源自特定的 div。我通过添加并稍后检查 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

现在有一个名为 event-propagation-path 的小型 GitHub 项目/NPM 模块，它充当 polyfill。在这里查看：

event-propagation-path @ GitHub

event-propagation-path @ NPM

Answer 5

让我们假设我们在 HTML table 标记中查找事件路径。

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