suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung des Unterschieds zwischen addEventListener und on

Detaillierte Erklärung des Unterschieds zwischen addEventListener und on

黄舟
黄舟Original
2017-12-04 15:25:032483Durchsuche

Wir haben Ihnen in einem früheren Artikel die Verwendung von addEventListener in JavaScript vorgestellt. Ich glaube, dass jeder ein besseres Verständnis von addEventListener hat, daher werden wir Ihnen heute weiterhin die detaillierte Erklärung von addEventListener vorstellen. Der Unterschied zu on!

Warum benötigen Sie addEventListener?

Schauen wir uns zuerst einen Ausschnitt an:

HTML-Code

<div id="box">追梦子</div>

Auf Code verwenden 

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

Sehen Sie es sich, beim zweiten Klick Der erste Onclick ist zwar abgedeckt, um die gewünschten Ergebnisse zu erzielen, aber manchmal müssen wir mehrere identische Ereignisse ausführen Wir müssen erraten, was wir wollen, Sie müssen es wissen, richtig! addEventListener kann dasselbe Ereignis mehrmals binden und überschreibt das vorherige Ereignis nicht.

Verwenden Sie den Code von addEventListener

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

Der erste Parameter der addEventListenert-Methode füllt den Ereignisnamen aus. Der zweite Parameter kann eine Funktion sein , und der dritte Parameter bezieht sich darauf, ob das Programm Ereignisverarbeitung in der Sprudelphase oder in der Erfassungsphase verarbeitet werden soll. Wenn es wahr ist, stellt es die Verarbeitung in der Erfassungsphase dar Blasenphase. Der dritte Parameter kann weggelassen werden und wird in den meisten Fällen nicht benötigt. Wenn Sie den dritten Parameter nicht schreiben, ist der Standardwert falsch

Die Verwendung des dritten Parameters

Manchmal ist die Situation so

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

Wenn ich Box hinzufüge, klicken Sie auf das Ereignis. Wenn ich direkt auf die Box klicke, gibt es kein Problem, aber wenn ich auf das untergeordnete Element klicke, wie wird es ausgeführt? ? (Ausführungsreihenfolge) 

box.addEventListener("click",function(){
    console.log("box");
})

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

Mit anderen Worten: Standardmäßig werden Ereignisse in der Reihenfolge ausgeführt, in der Ereignisse auftauchen.

Wenn der dritte Parameter als „true“ geschrieben wird, wird die Ausführungsreihenfolge der Ereigniserfassung befolgt. 

box.addEventListener("click",function(){
    console.log("box");
},true)

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

Ereignis-Sprudel-Ausführungsprozess:

Beginnen Sie mit dem Sprudeln nach oben vom spezifischsten Element (dem Element, auf das Sie geklickt haben). Es ist: Kind-. >box

Ereigniserfassungs-Ausführungsprozess:

Beginnen Sie mit dem am wenigsten spezifischen Element (der äußersten Box) und sprudeln Sie hinein. Nehmen Sie unseren obigen Fall, um darüber zu sprechen. Die Reihenfolge ist: box-> ;child

Zusammenfassung:

Der Unterschied zwischen addEventListener und on wird durch die Instanzmethode detailliert beschrieben. Sie haben ein besseres Verständnis dafür Verwendung von addEventListener und weiter. Ich hoffe, es wird für Ihre Arbeit hilfreich sein!

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von addEventListener in JavaScript

Javascript DOM Object Learning Event Stream addEventListener() Verwendungs-Tutorial

Analyse von addEventListener() und removeEventListener() in js

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen addEventListener und on. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Fragen und Antworten zur Kamelfallbenennung und JSNächster Artikel：Fragen und Antworten zur Kamelfallbenennung und JS

In Verbindung stehende Artikel

Mehr sehen