Verwandte Lesungen:
JavaScript -Ereignis -Lernzusammenfassung (v) Mausereignis Typ in JS
//www.vevb.com/article/86259.htm
JavaScript -Ereignislernzusammenfassung (i) Ereignisfluss
//www.vevb.com/article/86261.htm
JavaScript -Event -Lernzusammenfassung (iv) öffentliche Ereignismitglieder (Eigenschaften und Methoden)
//www.vevb.com/article/86262.htm
JavaScript -Ereignis -Lernzusammenfassung (ii) JS -Ereignishandler
//www.vevb.com/article/86264.htm
JavaScript Event Learning Summary (iii) JS -Ereignisobjekt
1. Ereignisse
Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder Browser selbst ausgeführt wird, z. B. Klicken, Laden und Mausover sind alle Namen des Ereignisses.
Ereignisse sind die Brücke zwischen JavaScript und DOM.
Wenn Sie auslösen, werde ich das Ereignis ausführen und seine Verarbeitungsfunktion aufrufen, um den entsprechenden Javascript -Code auszuführen, um die Antwort anzugeben.
Typische Beispiele sind: Das Lastereignis wird nach dem Laden der Seite ausgelöst; Der Benutzer klickt auf das Element und löst das Klickereignis aus.
2. Ereignisfluss
1. Bewusstsein für die Influenza der Ereignisse
Frage: Klicken Sie auf das Seitenelement. Welche Art von Element kann ein solches Ereignis spüren?
Antwort: Während Sie auf ein Element klicken, klicken Sie auch auf das Containerelement des Elements oder sogar auf die gesamte Seite.
Beispiel: Es gibt drei konzentrische Kreise, fügen Sie jedem Kreis die entsprechende Ereignishandhabungsfunktion hinzu, und der entsprechende Text wird angezeigt. Klicken Sie auf den innersten Kreis und klicken Sie auch auf den äußeren Kreis, sodass auch das Klickereignis des äußeren Kreises ausgelöst wird.
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <titels> </title> </head> <style> #outer {Position: Absolute; Breite: 400px; Höhe: 400px; Top: 0; links: 0; unten: 0; Rechts: 0; Rand: Auto; Hintergrundfarbe: Deeppink; } #middle {Position: absolut; Breite: 300px; Höhe: 300px; Top: 50%; Rand -Links: -150px; Rand: -150px; Hintergrundfarbe: Deepskyblue; } #inner {Position: absolut; Breite: 100px; Höhe: 100px; Top: 50%; Links: 50%; Rand -Links: -50px; Rand: -50px; Hintergrundfarbe: Darkgreen; Text-Align: Mitte; Zeilenhöhe: 100px; Farbe: weiß; }#äußere,#Mitte,#Inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "Middle"> <div id = "Inner"> Klicken Sie auf mich! </div> </div> </div> <script> var innerCircle = document.getElementById ("innere"); Innercircle.onclick = function () {alert ("InnerCircle"); }; var middlecircle = document.getElementById ("Middle"); middlecircle.onclick = function () {alert ("middlecircle"); } var outercircle = document.getElementById ("äußere"); OUTERCIRCLE.Onclick = function () {alert ("obercircle"); } </script> </body> </html>Die Effekte sind wie folgt:
2. Ereignisfluss
Wenn ein Ereignis auftritt, wird es in einer bestimmten Reihenfolge zwischen dem Elementknoten und dem Stammknoten ausbreitet. Alle Knoten, die durch den Pfad gehen, erhalten das Ereignis. Dieser Ausbreitungsprozess ist der DOM -Ereignisstrom.
Die Reihenfolge der Ereignisausbreitung entspricht den beiden Ereignisstrommodellen des Browsers: Capture Event Stream und Bubble Event Stream.
Bubble Event Stream: Die Ausbreitung von Ereignissen ist vom spezifischsten Ereignisziel bis zum am wenigsten spezifischen Ereignisziel. Das heißt, von den Blättern des Dombaums bis zur Wurzel.
Erfasseter Ereignisstrom: Die Ausbreitung von Ereignissen ist vom am wenigsten spezifischen Ereignisziel zum spezifischsten Ereignisziel. Das heißt, von den Wurzeln des Dombaums bis zu den Blättern.
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <titels> </title> </head> <body> <div id = "mydiv"> klicken
Klicken Sie im obigen HTML -Code auf das Element <Div> in der Seite.
Im sprudelnden Ereignisstrom ist die Auftrag des Ereignisausbreitungsantrags <div> -》 <body> -》 <html> -》 Dokument
Im erfassten Ereignisstrom ist die Auftrag des Ereignisausbreitungsauftrags dokument:》 <html> -》 <body> -》 <div>
Notiz:
1) Alle modernen Browser unterstützen Ereignisblasen, aber es gibt geringfügige Unterschiede in bestimmten Implementierungen:
In IE5.5 und früher überspringen Ereignisblasen das <html> Element (springen Sie direkt von Körper zu Dokument).
IE9-, Firefox-, Chrom- und Safari -Blasenereignisse bis zum Fensterobjekt.
2) IE9, Firefox, Chrome, Opera und Safari Alle Support Event Capture. Obwohl der DOM -Standard erfordert, dass Ereignisse von Dokumentobjekten ausgebildet werden sollten, beginnen diese Browser, Ereignisse aus Fensterobjekten zu erfassen.
3) Da alte Browser es nicht unterstützen, verwenden nur wenige Menschen die Event -Capture. Es wird empfohlen, Ereignisblasen zu verwenden.
DOM Event Stream
Der DOM -Standard verwendet Capture + Bubbling. Beide Ereignisströme auslösen alle Objekte des DOM, beginnend mit dem Dokumentobjekt und enden mit dem Dokumentobjekt.
Der DOM -Standard hat diesen Ereignisfluss vorhanden, die drei Phasen der Ereigniserfassung in der Zielstufe und der Ereignisblasenstufe enthält.
Ereigniserfassungsphase: Das tatsächliche Ziel (<Div>) empfängt keine Ereignisse während der Erfassungsphase. Das heißt, in der Capture -Phase hält das Ereignis von Dokument zu <html> und dann nach <body> an. Im obigen Bild ist es 1 ~ 3.
In der Zielphase: Das Ereignis tritt auf und wird auf <div> verarbeitet. Die Ereignisverarbeitung wird jedoch als Teil der sprudelnden Phase angesehen.
Bubble -Phase: Ereignisse verbreiten sich zum Dokument zurück.
Notiz:
1): Das DOM -Standard sieht vor, dass die Ereigniserfassungsphasenerfassung Ereignisziele umfasst, aber Ereignisse auf Ereignisobjekten werden in IE9, Safari, Chrome, Firefox, Opera9.5 und späteren Versionen festgelegt. Infolgedessen gibt es zwei Möglichkeiten, Ereignisse auf dem Zielobjekt zu betreiben.
2): Nicht alle Ereignisse gehen durch die Blasenbühne. Alle Ereignisse durchlaufen die Capture -Stufe und befinden sich in der Zielstufe, aber einige Ereignisse überspringen die Blasenphase: Zum Beispiel das Fokusereignis, das den Eingabefokus und das Blur -Ereignis erhält, das den Eingangsfokus verliert.
Beispiel für zwei Chancen, Ereignisse auf dem Zielobjekt zu betreiben:
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <titels> </title> </head> <style> #outer {Position: Absolute; Breite: 400px; Höhe: 400px; Top: 0; links: 0; unten: 0; Rechts: 0; Rand: Auto; Hintergrundfarbe: Deeppink; } #middle {Position: absolut; Breite: 300px; Höhe: 300px; Top: 50%; Rand -Links: -150px; Rand: -150px; Hintergrundfarbe: Deepskyblue; } #inner {Position: absolut; Breite: 100px; Höhe: 100px; Top: 50%; Links: 50%; Rand -Links: -50px; Rand: -50px; Hintergrundfarbe: Darkgreen; Text-Align: Mitte; Zeilenhöhe: 100px; Farbe: weiß; }#äußere,#Mitte,#Inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "Middle"> <div id = "Inner"> Klicken Sie auf mich! </div> </div> </div> <script> var innerCircle = document.getElementById ("innere"); Innercircle.addeVentListener ("Click", function () {alert ("InnerCircles Klickereignis wird in der Erfassungsstufe abgefeuert");}, true); Innercircle.addeVentListener ("Click", function () {alert ("InnerCircles Klickereignis wird in der Blasenstufe abgefeuert");}, false); var middlecircle = document.getElementById ("Middle"); middlecircle.addeventListener ("click", function () {alert ("MiddleCircles Klickereignis wird in der Erfassungsstufe abgefeuert");}, true); middlecircle.addeventListener ("click", function () {alert ("MiddleCircles Klick -Ereignis wird in der Bubble -Stufe abgefeuert");}, false); var outercircle = document.getElementById ("äußere"); OuterCircle.AdDeVentListener ("Click", function () {alert ("OuterCircles Klickereignis wird in der Erfassungsstufe abgefeuert");}, true); OuterCircle.AdDeVentListener ("Click", function () {alert ("Das Klickereignis von Otercircle wird in der Blasenstufe abgefeuert";}, false); </script> </body> </html>Der Betriebseffekt ist, dass 6 Boxen nacheinander eine auftauchen. Um das Prinzip zu erklären, habe ich es in ein Bild integriert:
3. Typische Anwendung des Ereignisflusses - Ereignisproxy
In der traditionellen Ereignisverarbeitung muss ein Ereignishandler zu jedem Element hinzugefügt werden. JS Event Proxy ist eine einfache und effektive Technik, mit der Sie den Ereignisprozessor einem übergeordneten Element hinzufügen können, wodurch das Hinzufügen des Ereignisprozessors zu mehreren untergeordneten Elementen vermieden wird.
Das Prinzip des Ereignisproxy verwendet Ereignisblasen und Zielelemente, fügen Sie den Ereignisprozessor zum übergeordneten Element hinzu, warten Sie auf das untergeordnete Element für Blasenereignisse, und das übergeordnete Element kann bestimmen, welches untergeordnete Element durch Ziel ist (dh Srcelement) und somit eine entsprechende Verarbeitung durchführen. Weitere Inhalte über das Ziel finden Sie in den folgenden Beispielen für die öffentlichen Mitglieder (Eigenschaften und Methoden) des Ereignisses (IV) für die folgenden Beispiele.
Traditionelle Ereignisverarbeitung, Hinzufügen eines Ereignishandlers zu jedem Element ist der Code wie folgt:
<body> <ul id = "color-list"> <li> rot </li> <li> orange </li> <li> Gelb </li> <li> grün </li> <li> blau </li> <li> Indigo </li> <li> lila </li> </ul> <script> () {var colorlist = document.Getelement byid byid ("color-list"; Colors = ColorList.GetElementsByTagName ("li"); alert (targetElement.innerhtml);Die Verarbeitungsmethode des Ereignisagenten lautet wie folgt:
<body> <ul id = "color-list"> <li> rot </li> <li> orange </li> <li> Gelb </li> <li> grün </li> <li> blau </li> <li> Indigo </li> <li> lila </li> </ul> <script> (Funktion () {var colorlist = document. ColorList.AdDeVentListener ('Click', ShowColor, False); }}) (); </script> </body>Um die Vorteile des Event -Proxy zusammenzufassen:
A. Reduzieren Sie mehrere Ereignisprozessoren auf eins, da der Ereignisprozessor im Speicher wohnen muss, was die Leistung verbessert. Stellen Sie sich vor, es gibt eine 100-Reihen-Tabelle, in der die traditionelle Art der Bindung von Ereignishandlern für jede Zelle mit Ereignis-Proxy (d. H. Hinzufügen eines Ereignishandlers zur Tabelle) verglichen wird, es ist nicht schwer zu schließen, dass Ereignisproxy einige potenzielle Risiken vermeidet und die Leistung verbessert.
B. Das DOM -Update erfordert nicht, dass der Ereignisprozessor wiederhergestellt wird, da der Ereignis -Proxy unterschiedliche Verarbeitungsmethoden für verschiedene Kinderelemente anwenden kann. Wenn andere untergeordnete Elemente (A, Span, Div usw.) hinzugefügt werden, können Sie die Ereignisbehandlungsfunktion des Event -Agenten direkt ändern. Es besteht keine Notwendigkeit, den Prozessor wiederherzustellen und nicht erneut durchzuschleudern.
Das obige ist die Zusammenfassung des JavaScript -Ereignis -Lernzusammenhauses (i) verwandte Kenntnisse über das Ereignis -Streaming, das der Editor Ihnen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein!