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>