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

Question

I was wondering what the difference between the e.target.parentNode and e.path[1] is? And if there is, what is better & why?

Here is how the sturcture looks like:

Here ist the console log:

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

Here is the click console.log(e)

NB: click event is on the button element

Thank you

Answer 1

Experimentally, on the one browser I've found that supports it, e.path[1] and e.target.parentNode refer to the same element. Eg, there's no difference.

But note that Event#path is not well-supported (whereas Event#target and Node#parentNode are), and as far as I can tell, it's not (yet?) standardized: It doesn't appear in the DOM4 Event interface , for instance. It's also not in the WHAT-WG Event interface , but that spec does mention a method , composedPath , that appears to return the same sort of information.

Chrome 51 seems to support Event#path ; Firefox 47 does not. Neither supports composedPath .

You can see if your current browser supports it here:

 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>