Es gibt drei Möglichkeiten, JavaScript-Ereignisse zu verarbeiten: 1. HTML-Ereignishandler. Fügen Sie den Ereignishandler direkt in den HTML-Code ein. Die Syntax lautet „<element event=event function...>“ 2. Ereignishandler auf DOM0-Ebene Angegebenes Objekt Um die Ereignisverarbeitung hinzuzufügen, lautet die Syntax „element object.event=function(){...}“ 3. Ereignishandler auf DOM2-Ebene werden auch bestimmten Objekten hinzugefügt und hauptsächlich zur Verarbeitung der Vorgänge zum Angeben von und verwendet Löschen von Event-Handlern.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.
3 Möglichkeiten zur Verwendung von Javascript-Ereignishandlern
Wenn ein Ereignis auftritt, müssen wir es behandeln. Es gibt drei Hauptmethoden von Javascript-Ereignishandlern:
1. HTML-Ereignishandler
Das heißt, wir fügen Ereignishandler direkt im HTML-Code hinzu, wie zum Beispiel den folgenden Code:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ Alert("HTML Hinzugefügte Ereignisbehandlung"} </script>Aus dem obigen Code können wir erkennen, dass die Ereignisverarbeitung direkt im Element verschachtelt ist. Dies hat ein Problem: Die Kopplung zwischen dem HTML-Code und js ist zu stark. Wenn Sie eines Tages die showmsg in js ändern möchten, dann nicht Müssen Sie es in js ändern, müssen Sie es auch in HTML ändern. Wir können ein oder zwei Änderungen akzeptieren, aber wenn Ihr Code das Niveau von 10.000 Zeilen erreicht, ist die Änderung sehr zeit- und kostenintensiv , empfehlen wir diese Methode nicht.
2. DOM-Ereignishandler der Ebene 0
Um die Ereignisverarbeitung für das angegebene Objekt hinzuzufügen, sehen Sie sich den folgenden Code an:
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ warning("DOM-Level hinzugefügte Ereignisverarbeitung" ); } btn.onclick=null;//Wenn Sie das Click-Ereignis von btn löschen möchten, setzen Sie es einfach auf null</script>Aus dem obigen Code können wir ersehen, dass im Vergleich zu HTML-Ereignishandlern, DOM-Level-0-Ereignissen, die Kopplung zwischen HTML-Code und JS-Code stark reduziert wurde. Intelligente Programmierer sind jedoch immer noch nicht zufrieden und hoffen, einen einfacheren Weg zu finden, damit umzugehen.
3. Ereignishandler auf DOM2-Ebene
DOM2 fügt auch Ereignishandler zu bestimmten Objekten hinzu, umfasst jedoch hauptsächlich zwei Methoden zur Verarbeitung der Vorgänge zum Angeben und Entfernen von Ereignishandlern: addEventListener() und removeEventListener(). Sie alle erhalten drei Parameter: den Namen des zu behandelnden Ereignisses, die Funktion als Ereignishandler und einen booleschen Wert (ob das Ereignis in der Erfassungsphase behandelt werden soll). Schauen Sie sich den folgenden Code an:
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Hier wir Stellen Sie den letzten Wert auf „false“ ein, d. btn.removeEventListener ("click",showmsg,false);//Wenn Sie dieses Ereignis löschen möchten, übergeben Sie einfach die gleichen Parameter</script>Hier können wir sehen, dass beim Hinzufügen und Löschen der Ereignisverarbeitung die letzte Methode direkter und einfacher ist. Ma Haixiang erinnert jedoch alle daran, dass bei der Verarbeitung des Löschereignisses die übergebenen Parameter mit den vorherigen Parametern übereinstimmen müssen, da sonst der Löschvorgang ungültig wird!
Erweitern Sie Ihr Wissen:
Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse auf einer Seite empfangen werden. In den frühen Tagen der Browserentwicklung waren die beiden großen Browserhersteller IE und Netscape uneins, was zu einer frustrierenden Situation führte Der Ereignisfluss war eine völlig andere Definition. Das ist es, was wir kennen: das Event-Bubbling des IE, die Event-Capture von Netscape. Machen wir zunächst ein Foto und schauen uns kurz den Aufbau an:
1. Sprudelndes Ereignis
Ereignis-Bubbling bedeutet, dass das Ereignis zunächst vom spezifischsten Element (dem Knoten mit der tiefsten Verschachtelungsebene im Dokument) empfangen wird und sich dann nach oben zum am wenigsten spezifischen Knoten (dem Dokument) weiterleitet. Nehmen Sie zur Veranschaulichung das obige Bild: Wenn Sie auf den Textteil klicken, wird er zuerst vom Element am Text empfangen und dann Schritt für Schritt an das Fenster weitergegeben, dh der Prozess von 6-7-8-9-10 wird ausgeführt.
2. Ereigniserfassung
Ereigniserfassung bedeutet, dass das Ereignis zuerst vom weniger spezifischen Knoten empfangen wird und der spezifischste Knoten das Ereignis zuletzt empfängt. In ähnlicher Weise wird im obigen Modell beim Klicken auf den Textteil dieser zunächst vom Fenster empfangen und dann Schritt für Schritt an das Textelement weitergegeben, dh der Prozess 1-2-3-4-5 wird ausgeführt.