Kürzlich, da ich die Website jeden Tag ändern muss, um Spezialeffekte für die Website zu erzielen, habe ich viele JS -Kontaktvorfälle gesehen. Ich weiß nur, wie man einen kleinen Teil davon benutzt. Manchmal ist es auch ziemlich chaotisch, wenn ich es benutze. Jetzt habe ich es aussortiert. Ich werde es für Ihre Referenz mit der Wulin Network -Plattform teilen!
1. Was ist ein JavaScript -Ereignis?
Ereignisse sind das schlagende Herz von JavaScript -Anwendungen und der Klebstoff, der alles zusammenklebt. Wenn wir bestimmte Arten von Interaktionen mit Webseiten im Browser haben, passieren Ereignisse.
Ereignisse können auf bestimmte Inhalte klicken, ein bestimmtes Element durchlaufen oder bestimmte Tasten auf der Tastatur drücken, und Ereignisse können auch in einem Webbrowser stattfinden, z. Um es unverblümt auszudrücken, Ereignisse sind spezifische Interaktionsmomente, die in einem Dokument oder Browser auftreten!
Durch die Verwendung von JavaScript können Sie bestimmte Ereignisse anhören und angeben, dass bestimmte Ereignisse als Antwort auf sie auftreten.
2. Ereignisfluss
Der Ereignisfluss beschreibt die Reihenfolge der auf der Seite akzeptierten Ereignisse. In den frühen Stadien der Browserentwicklung kämpften zwei große Browserhersteller, dh und Netscape, gegenseitig, und eine Betrugssituation trat auf, dh ihre Interpretation des Ereignisflusses zeigte zwei völlig entgegengesetzte Definitionen. Das ist es, mit dem wir vertraut sind: IE Event Blasen, Netscape Event Capture. Lassen Sie uns zuerst ein Foto machen und einen kurzen Blick auf die Struktur werfen:
1. Ereignisblasen
Ereignisblasen bedeutet, dass das Ereignis zunächst vom spezifischsten Element empfangen wird (der Knoten mit der tiefsten Verschachtelungsstufe im Dokument) und dann Schritt für Schritt nach oben zum am wenigsten spezifischen Knoten (das Dokument) ausbreitet. Nehmen Sie das obige Diagramm, um zu veranschaulichen, dass es beim Klicken auf den Textteil zuerst vom Element am Text empfangen wird und dann Schritt für Schritt zum Fenster ausbreitet, dh der Prozess von 6-7-8-9-10 wird ausgeführt.
2. Ereigniserfassung
Ereigniserfassung bedeutet, dass das Ereignis zuerst von einem weniger spezifischen Knoten empfangen wird und der spezifischste Knoten schließlich das Ereignis erhält. In ähnlicher Weise wird im obigen Modell beim Klicken auf den Textteil zuerst das Fenster empfangen und dann Schritt für Schritt zum Textelement ausbreitet, dh der Prozess von 1-2-3-4-5 wird ausgeführt.
Wie funktioniert es im Code? Später gegeben!
3. Drei Möglichkeiten, um das JavaScript -Ereignis zu bewältigen
Wenn ein Ereignis auftritt, müssen wir uns damit befassen. Es gibt drei Hauptmethoden, um JavaScript -Event -Handler zu handhaben:
1. HTML -Event -Handler
Das heißt, wir fügen dem HTML -Code direkt Ereignishandler hinzu, wie z. B. den folgenden Code:
<input id = "btn" value = "button" type = "button" onclick = "showmsg ();"> <script> Funktion Showmsg () {alert ("HTML -Ereignisverarbeitung addieren"); } </script>Aus dem obigen Code können wir sehen, dass die Ereignisverarbeitung direkt in Elemente verschachtelt ist. Dies gibt ein Problem: Die Kopplung zwischen HTML -Code und JS ist zu stark. Wenn Sie eines Tages Showsg in JS ändern möchten, müssen Sie es nicht nur in JS ändern, sondern es auch in HTML ändern. Wir können ein oder zwei Änderungen akzeptieren, aber wenn Ihr Code das Niveau von 10.000 Zeilen erreicht, kostet er die Personen und das Geld, um ihn zu ändern. Daher empfehlen wir diese Methode nicht.
2. Event -Handler von Dom0 Level
Wenn Sie das angegebene Objekt Ereignisverarbeitung hinzufügen, siehe der folgende Code:
<input id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById ("btn"); btn.onclick = function () {alert ("DOM-Level Addition Event Processing"); } btn.onclick = null; // Wenn Sie das Klicken von BTN löschen möchten, setzen Sie es auf NULL </script>Aus dem obigen Code können wir sehen, dass die Kopplung zwischen Ereignissen auf DOM0-Ebene, HTML-Code und JS-Code im Vergleich zu HTML-Event-Handlern stark reduziert wurde. Smart Programmierer sind jedoch immer noch nicht zufrieden und hoffen, einen einfacheren Weg zu finden, um damit umzugehen. Schauen wir uns die dritte Methode an.
3. Event -Handler von DOM2 Level
DOM2 fügt auch Ereignishandler zu bestimmten Objekten hinzu, betrifft jedoch hauptsächlich zwei Methoden, mit denen Ereignishandler angegeben und gelöscht werden: addEventListener () und RemeEventListener (). Sie alle erhalten drei Parameter: den zu verarbeitenden Ereignisnamen, die Funktion als Ereignishandler und ein boolescher Wert (ob das Ereignis in der Erfassungsstufe verarbeitet wird) im folgenden Code:
<input id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById ("btn"); Btn.AdDeVentListener ("Click", Showmsg, False); // Hier setzen wir den letzten Wert auf false, dh es wird in der Erfassungsstufe nicht verarbeitet. Im Allgemeinen ist die Blasenverarbeitung in jeder Browser-Funktion Showmsg () {alert ("DOM-Level-Ereignis-Handler hinzufügen") kompatibler; } btn.removeEventListener ("Click", ShowMSG, False); // Wenn Sie dieses Ereignis löschen möchten, müssen Sie nur denselben Parameter </script> übergebenHier können wir sehen, dass beim Hinzufügen und Entfernen von Ereignissen die letzte Methode direkter und einfacher ist. Ma Haixiang erinnert jedoch alle daran, dass die übergebenen Parameter bei der Verarbeitung des Löschereignisses mit den vorherigen Parametern übereinstimmen müssen, andernfalls ist die Löschung ungültig!
4. Der Prozess und der Unterschied zwischen Ereignisblasen und Ereigniserfassung
Lassen Sie mich jedoch einen Code geben, um den Prozess der Ereignisblasen und der Ereigniserfassung zu erklären, und lassen Sie sich gleichzeitig den Unterschied zwischen den beiden sehen:
<! docType html> <html Lang = "en"> <head> <meta charset = "utf-"> <title> document </title> <style> #p {width: px; Höhe: px; border: px solid schwarz;} #c {width: px; Höhe: px; borde: px rot;} </style> </style </style </head> </head> </head> </head> </head> </head> </head> <- www.mahaixiang.cn <div id = "c"> Ich mag www.mahaixiang.cn </div> </div> <script> var p = document.getElementById ('P'); var c = document.getElementById ('c'); C.AdDeVentListener ('Click', function () {alert ('untergeordneter Knotenerfassung')}, true); C.AdDeVentListener ('Click', function () {alert ('untergeordnete Knotenblasen')}, false); P.AdDeVentListener ('Click', function () {alert ('untergeordnete Knotenblasen')}, false); </script> </body> </html>Wenn Sie den obigen Code ausführen und auf das untergeordnete Element klicken, werden wir feststellen, dass die Reihenfolge der Ausführung lautet: übergeordnete Knoten-Erfassungsknoten-Knoten-Capt-Kind-Knotenknoten-Knotenblasen. Aus diesem Beispiel können wir verstehen, dass das DOM2 -Ereignis zusätzlich vorsieht, dass Ereignisse drei Stufen enthalten:
1. Ereigniserfassungstufe;
2. in der Zielstufe;
3. Die Ereignisblasenbühne.
Erstens ist es die Erfassung, dann in der Zielstufe (dh an dem Ort, an dem das Ereignis ausgegeben wird), und schließlich sprudelt es. Unwissenschaftlich ist, dass es kein Ereignisverarbeitungsprogramm auf DOM1-Ebene gibt. Bitte achten Sie darauf und hören Sie auf, Witze zu machen!
5. Ergänzung
1. Der IE -Event -Handler verfügt auch über zwei Methoden: AttafEvent () fügt Ereignisse hinzu und löscht () Ereignisse. Diese beiden Methoden erhalten die gleichen zwei Parameter: den Ereignishandlernamen und die Transaktionsverarbeitungsfunktion. Warum gibt es hier keinen Booleschen Wert? Da IE8 und frühere Versionen nur Ereignisblasen unterstützen, entspricht der letzte Parameter standardmäßig falsch zu handhaben! (Zu den Browsern, die IE -Event -Handler unterstützen, gehören IE, Opera).
2. Ereignisobjekte sind Objekte, mit denen relevante Informationen aufgezeichnet werden, wenn einige Ereignisse auftreten. Ereignisobjekte werden jedoch nur dann generiert, wenn Ereignisse auftreten, und können nur von der Ereignishandlerfunktion intern zugegriffen werden. Nachdem alle Event -Handler -Funktionen ausgeführt werden, wird das Ereignisobjekt zerstört!
Das obige ist der Weg, um JavaScript -Ereignisse (drei Typen) zu bewältigen, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird für Sie hilfreich sein!