Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click

Das ist der Unterschied zwischen ddEventListener und on

Warum wird addEventListener benötigt?

Schauen wir uns zunächst einen Clip an:

<div id="box">Test</div>

Verwendung im Code:

windwo.onload = Funktion(){
  var box = document.getElementById("box");
  box.onclick = ()=>console.log("Ich bin box1");
  box.onclick = ()=>console.log("Ich bin box2");
}
// Laufergebnis: Ich bin Box2

Sie sehen, das zweite onclick-Ereignis deckt das erste onclick ab. Obwohl wir in den meisten Fällen on verwenden können, um den gewünschten Effekt zu erzielen, müssen wir manchmal mehrere identische Ereignisse ausführen, was mit on offensichtlich nicht zu erreichen ist. Sie können jedoch addEventListener verwenden, um dasselbe Ereignis mehrmals zu binden, ohne das vorherige Ereignis zu überschreiben.

Code mit „addEventListener“

fenster.onload = funktion(){
  var box = document.getElementById("box");
  box.addEventListener("klicken",()=>console.log("Ich bin Box1"));
  box.addEventListener("klicken",()=>console.log("Ich bin Box2"));
}
// Operationsergebnis: Ich bin Box1
            //Ich bin Box2

Der erste Parameter addEventListener wird mit dem Ereignisnamen gefüllt. Beachten Sie, dass Sie nichts schreiben müssen. Der zweite Parameter kann eine Funktion sein. Der dritte Parameter bezieht sich darauf, ob das Ereignis in der Bubbling-Phase oder in der Capture-Phase verarbeitet werden soll. Wenn „true“ bedeutet dies, dass die Verarbeitung in der Capture-Phase erfolgt. Wenn „false“ bedeutet dies, dass die Verarbeitung in der Bubbling-Phase erfolgt. Der dritte Parameter kann weggelassen werden. In den meisten Fällen wird der dritte Parameter nicht benötigt. Wenn Sie den dritten Parameter nicht schreiben, wird standardmäßig „false“ verwendet.

Verwendung des dritten Parameters

Manchmal ist die Situation so:

<Text>
  <div id = "Box">
    <div id = "Kind"></div>
  </div>
</body>

Wenn ich dem Feld ein Klickereignis hinzufüge, gibt es kein Problem, wenn ich direkt auf das Feld klicke. Wie wird es jedoch ausgeführt, wenn ich auf das untergeordnete Element klicke?

box.addEventListener("klicken",()=>console.log("box"));
child.addEventListener("klicken",()=>console.log("child"));
// Ausführungsergebnis: child -> box

Das heißt, standardmäßig wird die Reihenfolge der Event-Bubbling-Ausführung eingehalten.

Wenn der dritte Parameter wahr ist, erfolgt die Ausführung in der Reihenfolge, in der die Ereignisse erfasst werden.

Zusammenfassen

1. Das onclick -Ereignis kann immer nur auf ein Objekt gleichzeitig verweisen

2. addEventListener kann mehrere Listener für ein Ereignis registrieren

3. addEventListener ist für jedes DOM-Element gültig, während onclick auf HTML-Elemente beschränkt ist

4. addEventListener kann die Auslösephase des Listeners steuern (Capture/Blase).

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!