javascript - e.target.parentNode 和 e.path 有什么区别[1]

Question

我想知道 e.target.parentNode 和 e.path[1] 之间有什么区别？如果有的话，什么更好以及为什么？

结构如下:

这是控制台日志:

console.log("button clicked!!!",e.target.parentNode, e.path[1], e.path[2])

这里是点击console.log(e)

注意:点击事件位于按钮元素上

谢谢

Answer 1

通过实验，在我发现支持它的浏览器上，e.path[1] 和 e.target.parentNode 引用相同的元素。例如，没有区别。

但请注意，Event#path 并未得到很好的支持(而 Event#target 和 Node#parentNode 则得到很好的支持)，并且到目前为止据我所知，它还没有标准化:它没有出现在 DOM4 Event interface 中， 例如。它也不在 WHAT-WG Event interface 中，但该规范确实提到了一种方法，composedPath ，似乎返回相同类型的信息。

Chrome 51 似乎支持 Event#path； Firefox 47 没有。两者都不支持composedPath。

您可以在此处查看您当前的浏览器是否支持它:

document.getElementById("outer").addEventListener("click", function(e) {
  var hasPath = !!e.path;
  var hasComposePath = !!e.composedPath;
  console.log("Has `path`? " + (hasPath ? "Yes" : "No"));
  console.log("Has `composedPath()`? " + (hasComposePath ? "Yes" : "No"));
  if (hasPath) {
    console.log("e.path[1] === e.target.parentNode? " + (e.path[1] === e.target.parentNode));
  }
});

<div id="outer">
  <div id="inner">
    Click me
  </div>
</div>