Was ist der Unterschied zwischen e.target.parentNode und e.path [1]

Question

Ich fragte mich, was der Unterschied zwischen den e.target.parentNode und e.path[1] ist? Und wenn es gibt, was ist besser & warum?

Hier ist, wie die sturcture wie folgt aussieht:

Hier ist das Konsolenprotokoll:

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

Hier wird der Klick console.log(e)

NB: Klicken Sie Ereignis auf die Schaltfläche Element

Danke

Answer 1

Experimentell auf der einen Browser die ich gefunden habe, die es unterstützt, e.path[1] und e.target.parentNode auf dasselbe Element beziehen. Zum Beispiel gibt es keinen Unterschied.

Aber beachten Sie, dass Event#path nicht gut unterstützt wird (während Event#target und Node#parentNode sind), und soweit ich sagen kann, es ist (noch?) Standardisiert: Es erscheint nicht in der DOM4 Event interface, zum Beispiel. Es ist auch nicht in der WHAT-WG Event interface, aber diese Spezifikation erwähnt eine Methode, composedPath, die die gleiche Art von Informationen zurückgibt.

Chrom   51 scheint Event#path zu unterstützen; Firefox   47 nicht. Weder unterstützt composedPath.

können Sie sehen, ob Ihr aktueller Browser hier unterstützt:

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>