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. Event -Handler
Wie bereits erwähnt, sind Ereignisse einige Aktionen, die vom Benutzer oder Browser selbst durchgeführt werden, z. B. Klicken, Laden und Mausover sind alle Namen von Ereignissen. Die Funktion, die auf ein bestimmtes Ereignis reagiert, wird als Event -Handler bezeichnet (auch als Event -Handler, Ereignishandler bezeichnet). Der Name des Ereignishandlers beginnt mit "ON", sodass der Ereignishandler des Klickereignisses auf dem Einklick ist und der Ereignishandler des Load -Ereignisses onload ist.
Es gibt drei Hauptmethoden, um Ereignishandler für Ereignisse anzugeben.
1. HTML -Event -Handler
Zunächst ist dieser Ansatz veraltet. Weil die Aktionen (JavaScript -Code) und der Inhalt (HTML -Code) eng gekoppelt sind. Aber es kann trotzdem verwendet werden, wenn eine kleine Demo geschrieben wird.
Es gibt zwei Möglichkeiten, dies zu tun, die beide sehr einfach sind:
Der erste Typ: Definieren Sie direkt den Ereignishandler und die enthaltenen Aktionen in der HTML.
Die Codekopie lautet wie folgt: <Eingabe type = "Schaltfläche" value = "klicken Sie mir!"/>
Der zweite Typ: Definiert den Ereignishandler in HTML und die ausgeführten Aktionen rufen das Skript an, das an anderer Stelle definiert ist.
Die Codekopie lautet wie folgt: <Eingabe type = "button" value = "klicken mich!"/> <script> Funktion showMessage () {alert ("Klick!");} </Script>
Notiz:
1) Durch die Ereignisvariable können Sie direkt auf das Ereignis selbst zugreifen. Zum Beispiel wird Onclick = "Alert (Event.Type)" das Click -Ereignis eröffnen.
2) Dieser Wert entspricht dem Zielelement des Ereignisses, wobei das Zielelement eingegeben wird. Zum Beispiel kann Onclick = "Alert (this.Value)" den Wertwert des Eingabeelements erhalten.
2. Event -Handler von Dom0 Level
Diese Methode ist einfach und browser, kann jedoch nur einen Ereignishandler zu einem Element hinzufügen.
Da diese Methode Elemente mehrere Ereignishandler hinzufügt, überschreibt Folgendes die vorherige.
Event -Handler hinzufügen:
<Eingabe type = "Schaltfläche" value = "Klicken Sie auf mich!" onclick = "showMessage ()"/> <script> Funktion showMessage () {alert ("Klick!");} </script>Event -Handler löschen:
Die Codekopie lautet wie folgt: myBtn.onclick = null;
3. Event -Handler von DOM2 Level
Event-Handler auf DOM2-Ebene können mehrere Ereignishandler zu einem Element hinzufügen. Es definiert zwei Methoden zum Hinzufügen und Entfernen von Ereignishandlern: addEventListener () und removentListener ().
Beide Methoden erfordern 3 Parameter: Ereignisname, Ereignishandlerfunktion und boolescher Wert.
Dieser boolesche Wert ist wahr, und das Ereignis wird in der Erfassungsstufe falsch verarbeitet, und das Ereignis wird in der Blasenstufe verarbeitet, die zu False standardt.
Fügen Sie Event -Handler hinzu: Fügen Sie nun zwei Event -Handler für die Button hinzu, eine "Hello" und das andere tauchen "Welt" auf.
<input id = "myBtn" type = "button" value = "klicken Sie auf mich!"/> <skript> var myBtn = document.getElementById ("myBtn"); MyBtn.AdDeVentListener ("Click", function () {alert ("hello");}, false); MyBtn.AdDeVentListener ("Click", function () {alert ("Welt");}, false); </script>Ereignishandler löschen: Der über AddEventListener hinzugefügte Ereignishandler muss über REMEDEVENTLITENER gelöscht werden, und die Parameter sind konsistent.
Hinweis: Die über AddEventListener hinzugefügte anonyme Funktion wird nicht gelöscht. Der folgende Code funktioniert nicht!
Die Codekopie lautet wie folgt: myBtn.removeEventListener ("klicken", function () {alert ("Welt");}, false);
Es scheint, dass der REMEDEVentListener mit dem oben addEventListener -Parameter übereinstimmt, aber tatsächlich ist die anonyme Funktion im zweiten Parameter völlig unterschiedlich.
Um den Event -Handler zu löschen, kann der Code so geschrieben werden:
<input id = "myBtn" type = "button" value = "klicken Sie auf mich!"/> <skript> var myBtn = document.getElementById ("myBtn"); var Handler = function () {alert ("Hallo"); } myBtn.AdDeVentListener ("Click", Handler, False); MyBtn.RemoveEventListener ("Click", Handler, False); </script>2. IE Event -Handler
1. Praktische Anwendungsszenarien
IE8 und unterhalb der Browser unterstützen AddEventListener nicht. Wenn Sie mit IE8 und unterhalb der Browser in der tatsächlichen Entwicklung kompatibel sein möchten. Wenn Sie native Bindungsereignisse verwenden und verarbeitet werden müssen, können Sie stattdessen JQuery Bind verwenden.
2. IE8 Ereignisbindung
IE8 und die folgenden Browser implementieren zwei ähnliche Methoden wie in DOM: attodeEvent () und detaachEvent ().
Beide Methoden erfordern zwei Parameter: den Ereignishandlernamen und die Ereignishandlerfunktion.
Notiz:
IE11 unterstützt nur AddEventListener!
IE9 und IE10 Support AttachEvent und AddEventListener!
TE8 und darunter nur unterstützen Sie AttafEvent!
Sie können den folgenden Code verwenden, um ihn in verschiedenen IE -Versionsbrowsern zu testen.
<input id = "myBtn" type = "button" value = "klicken Sie auf mich!"/> <skript> var myBtn = document.getElementById ("myBtn"); var Handlerie = function () {alert ("Halloie"); } var Handlerdom = function () {alert ("Hellodom"); } myBtn.AdDeVentListener ("Click", Handlerdom, False); MyBtn.attachevent ("Onclick", Handlerie); </script>Fügen Sie Event -Handler hinzu: Fügen Sie jetzt zwei Event -Handler für die Button hinzu, eine "Hallo" und der andere taucht auf "Welt" auf
<Script> var myBtn = document.getElementById ("myBtn"); MyBtn.attacheAvent ("Onclick", function () {alert ("Hallo");}); myBtn.attachevent ("Onclick", function () {alert ("Welt");}); </script>Hinweis: Der Betriebseffekt hier ist erwähnenswert:
"World" taucht zuerst in Browsern unter IE8 auf und dann "Hallo". Die Reihenfolge der Ereignisauslöser in DOM ist entgegengesetzt.
IE9 und über dem Browser tauchen zuerst "Hallo" auf und tauchen dann "Welt" auf. Die gleiche Reihenfolge wie die Ereignisauslöser in DOM.
Es ist zu sehen, dass der IE -Browser nach und nach auf den richtigen Weg ist. . .
Ereignishandler löschen: Der Event -Handler, der über den AttafEvent hinzugefügt wurde, muss über die Ablösungsmethode gelöscht werden, und die Parameter sind konsistent.
Wie beim DOM -Ereignis werden die hinzugefügten anonymen Funktionen nicht gelöscht.
Um den Event -Handler zu löschen, kann der Code so geschrieben werden:
<input id = "myBtn" type = "button" value = "klicken Sie auf mich!"/> <skript> var myBtn = document.getElementById ("myBtn"); var Handler = function () {alert ("Hallo"); } myBtn.attachEvent ("Onclick", Handler); MyBtn.DetACHEvent ("Onclick", Handler); </script>Hinweis : Im IE -Event -Handler: Scope gibt es einen anderen Ort, auf den man achten kann.
Mit der Methode attackEvent () wird der Ereignishandler im globalen Bereich ausgeführt, so dass dies gleich dem Fenster ist.
Der Umfang der Methode auf DOM2- oder DOM0 -Ebene befindet sich im Element, und dieser Wert ist das Zielelement.
Das folgende Beispiel wird wahr angezeigt.
<input id = "myBtn" type = "button" value = "klicken Sie auf mich!"/> <skript> var myBtn = document.getElementById ("myBtn"); myBtn.attachevent ("Onclick", function () {alert (this === Fenster);}); </script>Dies ist etwas zu beachten, wenn Sie den Cross-Browser-Code schreiben.
IE7/8 Erkennung:
// Richter IE7/8 Kompatibilitätserkennung var isie = !! fenster.activeXObject; var isie6 = isie &&! window.xmlhttprequest; var isie8 = isie && !! document.documentMode; var isie7 = isie &&! isie6 &&! isie8; if (isie8 || isie7) {li.attachEvent ("onclick", function () {_marker.openInfowindow (_iw);})} else {li.addeventListener ("Click", Funktion () {_marker.openinfowindow (_iw);Das obige ist die relevante Kenntnis der Zusammenfassung des JS -Ereignisses von JavaScript Event Learning (ii) des JS -Event -Handlers, den der Editor Ihnen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein!