Warum brauchen Sie AddEventListener?
Schauen wir uns einen Clip an:
HTML -Code
<div id = "box"> chasing treams </div>
Code mit ON
window.onload = function () {var box = document.getElementById ("box"); box.onclick = function () {console.log ("I Am box1"); } box.onclick = function () {box.style.fontsize = "18px"; console.log ("Ich bin box2"); }} Auslaufergebnis: "Ich bin Box2"Ich habe es gesehen, der zweite Onclick überschreibt den ersten Onclick. Obwohl wir in den meisten Fällen verwenden können, um die gewünschten Ergebnisse zu vervollständigen, müssen wir manchmal mehrere identische Ereignisse ausführen. Es ist offensichtlich, dass, wenn wir nicht weitermachen können, um das zu vervollständigen, was wir wollen, es nicht raten muss. Sie müssen wissen, richtig! Der AddEventListener kann das gleiche Ereignis mehrmals binden und überschreiben das vorherige Ereignis nicht.
Code mit AddEventListener
window.onload = function () {var box = document.getElementById ("box"); Box.AdDeVentListener ("Click", function () {console.log ("I Ambox1");}) Box.AdDeVentListener ("Click", function () {console.log ("I Am Box2");})} Running Ergebnis: I Am Box1 I. Box2Der erste Parameter der AddEventListent -Methode wird im Ereignisnamen ausgefüllt. Beachten Sie, dass Sie nicht schreiben müssen. Der zweite Parameter kann eine Funktion sein. Der dritte Parameter bezieht sich auf den Prozess des Ereignishandlers in der Bubble -Stufe oder in der Erfassungsstufe. Wenn True die Verarbeitung der Erfassungsstufe darstellt, kann der dritte Parameter ausgelassen werden, wenn Falsch die Verarbeitung der Blasenstufe darstellt. In den meisten Fällen muss der dritte Parameter nicht verwendet werden. Wenn der dritte Parameter nicht geschrieben ist, ist der Standardfehler falsch.
Verwendung des dritten Parameters
Manchmal ist dies der Fall
<body>
<div id = "box">
<div id = "child"> </div>
</div>
</body>
Wenn ich dem Feld ein Klickereignis hinzufüge, gibt es kein Problem, wenn ich direkt auf das Feld klicke. Wenn ich jedoch auf das untergeordnete Element klicke, wie macht es das? (Ausführungsauftrag)
Box.AdDeVentListener ("klicken", function () {console.log ("box");}) child.addeventListener ("click", function () {console.log ("child");}) Ausführungsergebnis: Child -BoxDas heißt, das Standard -Ereignis wird in der Reihenfolge durchgeführt, in der Ereignisblasen blasen.
Wenn der dritte Parameter als wahr geschrieben wird, wird er in der Reihenfolge der Ausführung der Ereigniserfassung durchgeführt.
Box.AdDeVentListener ("Click", function () {console.log ("box");}, true) child.addeventListener ("klicken", function () {console.log ("child");}) Ausführung: Box ChildEreignisblasenausführungsprozess:
Starten Sie vom spezifischsten Element nach oben (dem Element, auf das Sie geklickt haben). Nehmen Sie unseren Fall oben und die Reihenfolge ist: Kind-> Box
Ereigniserfassung Ausführungsprozess:
Beginnen Sie vom am wenigsten spezifischen Element (die Box am äußersten) in die Innenseite. Nehmen Sie unseren Fall oben und die Bestellung lautet: Box-> Kind
Der obige Artikel versteht den Unterschied zwischen AddEventListener und ON den Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.