Fragen dazu, ob nach dem Namen der Ereignisverarbeitungsfunktion in JS Klammern stehen

Heute fassen wir ein kleines Detail über Event-Handler zusammen. Sehen wir uns zunächst einige Konzepte der Ereignisverarbeitung an.

Die Ereignisverarbeitung (Ereignisbindung) in JS besteht darin, einige oder bestimmte Ereignisse bestimmte Aktivitäten auslösen zu lassen. Es gibt zwei gängige Formen, nämlich DOM Level 0 und DOM Level 2. Der größte Unterschied zwischen diesen beiden Methoden besteht darin, dass die Ereignisverarbeitung der DOM-Ebene 0 nur zum Ereignis-Bubbling verwendet werden kann, während die Ereignisverarbeitung der DOM-Ebene 2 durch Festlegen des dritten Parameters das Ereignis-Bubbling bzw. die Ereigniserfassung unterstützen kann.

Bei der DOM-Level-0-Ereignisverarbeitung wird eine Funktion im Allgemeinen direkt dem Element zugewiesen, wie in Methode 1 gezeigt. Sie können die Funktion auch in einem Skript zuweisen Event-Handler, wie in Methode zwei gezeigt.

<!--方式一-->
<div onclick="fun1();fun2(&#39;world!&#39;);"></div>
<!--方式二-->
<div id="a">点我</div>
<script>
var a=document.getElementById("a");
a.onclick=fun1; //方式二
function fun1(){
alert("hello!");
}
function fun2(cc){
alert(cc);
}
</script>

Der Unterschied zwischen diesen beiden Methoden wird auch im obigen Beispiel gezeigt. Die erste Methode kann mehrere Verarbeitungsfunktionen gleichzeitig binden erfordert Beachten Sie, dass es sich um eine globale Funktion handeln muss, andernfalls wird ein Referenzfehler ausgegeben. Die zweite Methode kann jeweils nur eine Verarbeitungsfunktion binden, andernfalls überschreibt die neue Funktion die alte Funktion.

Die DOM-Level-2-Ereignisverarbeitung bindet die Verarbeitungsfunktion nicht direkt, sondern fügt die Funktion wie folgt als Ereignis-Listener hinzu. Sie kann auch mehrere Verarbeitungsfunktionen binden, ohne sie zu überschreiben. Allerdings weist diese Methode Probleme mit der Browserkompatibilität auf und unter dem IE muss stattdessen die Methode attachmentEvent verwendet werden.

a.addEventListener("click",fun1,false); //事件冒泡
a.addEventListener("click",anotherFun,false); //不会覆盖上一事件，均被执行

Das war's für einen kurzen Rückblick, kommen wir zurück zum Thema. Ich frage mich, ob Ihnen während des Rückblicks ein verwirrendes kleines Detail aufgefallen ist ist ein Anführungszeichen, wenn auf Funktionen verwiesen wird, manchmal werden Klammern nach dem Funktionsnamen hinzugefügt, manchmal werden Klammern nicht hinzugefügt. Wie wirkt sich dies auf den Betrieb des Programms aus? Ich habe das Folgende auf der Grundlage meines eigenen Verständnisses nach Durchsicht der Informationen kurz zusammengefasst.

Fügen Sie zunächst Klammern in das Programm ein. Ja, das Hinzufügen von Klammern nach dem Funktionsnamen bedeutet, dass die Funktion sofort ausgeführt wird , erhalten Sie den Wert. Wenn Sie dies häufig verwenden, gewöhnen Sie sich möglicherweise daran, es überall dort zu schreiben, wo Funktionen aufgerufen werden, beispielsweise in der zuvor erwähnten Ereignisbehandlungsfunktion. Wenn Sie dies jedoch tun, kann es zu außer Kontrolle geratenen Situationen kommen. Beispielsweise möchten Sie eine Funktion offensichtlich nur dann ausführen, wenn Sie auf ein Element klicken, stellen jedoch fest, dass die Funktion am Anfang ausgeführt wird. Sie können feststellen, dass die im obigen Beispiel verwendeten Ereignisverarbeitungsfunktionen auf DOM0-Modus 2 und DOM2-Ebene nach dem Funktionsnamen keine Klammern hinzufügen. Der Grund besteht darin, diese Situation zu vermeiden. Wenn Sie Klammern hinzufügen, wird die Funktion fun1 sofort ausgelöst und ausgeführt.

Warum gibt es dann Klammern in der DOM0-Methode eins? Das liegt daran, dass die Anführungszeichen zwischen den Ereignisattributen des Tags direkt als js-Anweisungen ausgeführt werden. Nur durch das Hinzufügen von Klammern kann die Funktion aufgerufen und ausgeführt werden. Da das Ereignis jedoch mithilfe eines Element-Tags gebunden ist, wird der Ausführungszeitpunkt so gesteuert, dass er ausgelöst wird, wenn auf das Tag geklickt wird.

Was ist, wenn kein Funktionsname vorhanden ist und Sie ihn sofort ausführen möchten? Das heißt, der anonyme Funktionsausdruck wird sofort ausgeführt. Mal sehen, ob dahinter eine Klammer für die sofortige Ausführung steht. Beachten Sie, dass die Klammern, die den gesamten Funktionskörper in dieser IIFE-Form umgeben, den Umfang einschränken. Kinderschuhe, die sich speziell für IIFE interessieren, können die entsprechenden Informationen einsehen, die hier nicht im Detail beschrieben werden.

(function(){
//do something...
})();

Lassen Sie uns nun den Fall ohne Klammern analysieren. Wir haben bereits erwähnt, dass der Verzicht auf Klammern einen Kontrollverlust verhindern kann. Dies liegt daran, dass die Übergabe nur des Funktionsnamens an das Ereignis gleichbedeutend ist mit der Übergabe des Funktionszeigers (d. h. der Eintragsadresse dieser Funktion) an das Elementereignis. Dies hat den Vorteil, dass die Funktion bei Bedarf gefunden und ausgeführt werden kann. Um eine kleine Metapher zu verwenden: Wenn Sie Ihren Freund treffen und Klammern hinzufügen, ist es ihm egal, ob Sie gerade beschäftigt sind, und es entsteht ein ungebetenes und unangenehmes Gefühl Das Hinzufügen von Klammern ist gleichbedeutend damit, dass Ihr Freund Ihnen sagt, wo sein Zuhause ist und zu ihm kommt, wenn Sie ihn brauchen. Dies ist ein wirklich rücksichtsvoller Freund. Daher übergeben die meisten Ereignisbindungen einfach einen Funktionszeiger, also den Funktionsnamen, an das Ereignis.

Zu diesem Zeitpunkt gibt es noch eine weitere Frage. Die zuvor erläuterten Funktionen sind alle parameterlose Funktionen. Was ist, wenn es sich um eine parametrisierte Funktion wie fun2 im Codebeispiel handelt? Können wir nur die DOM0-Methode eins verwenden? Natürlich ist es negativ, den DOM0-Modus nicht zu verwenden, da dieser nicht dem Prinzip der Trennung von Struktur und Verhalten entspricht. Im Allgemeinen wird diese Situation durch die Verwendung anonymer Funktionen gelöst, wie im folgenden Code gezeigt. Wenn Sie gute Vorschläge haben, können Sie eine Nachricht zum Teilen hinterlassen~

//DOM Level 0
a.onclick=function(){
fun2("world!");
};
//DOM Level 2
a.addEventListener("click",function(){fun2("world!");},false);