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. Öffentliche Mitglieder des Eventobjekts
1. öffentliche Veranstaltungsmitglieder in Dom
Das Ereignisobjekt enthält Eigenschaften und Methoden, die sich auf das spezifische Ereignis beziehen, das es erstellt hat. Die ausgelösten Ereignisse sind unterschiedlich und die verfügbaren Eigenschaften und Methoden sind unterschiedlich. Alle Ereignisse im DOM haben jedoch die folgenden öffentlichen Mitglieder.
A. Vergleich von CurrentTarget und Ziel
In dem Ereignishandler entspricht das Objekt, das immer dem Wert des Stromausschnitts entspricht, und das Ziel enthält nur das tatsächliche Ziel des Ereignisses.
Zum Beispiel: Auf der Seite befindet sich eine Schaltfläche, registrieren Sie das Klickenereignis im Körper (den übergeordneten Knoten der Schaltfläche). Wenn die Schaltfläche klickt, sprudelt das Klickereignis zur Verarbeitung zum Körper.
<body> <input id = "btn" type = "button" value = "klicken"/> <script> document.body.onclick = function (Ereignis) {console.log ("Klicken Sie in Body registriert"); console.log ("this === Ereignis.CurrentTarget?"+(this === Ereignis.CurrentTarget)); // true console.log ("CurrentTarget === DOCUMENT.BODY?"+(Ereignis.CurrentTarget === document.body)); // true console.log ('event.target === document.getElementById ("btn")?'+(Event.target === document.getElementById ("btn")); // true} </script> </body>Das laufende Ergebnis ist:
B. Durch das Typattribut können mehrere Ereignisse in einer Funktion behandelt werden.
Prinzip: Unterschiedliche Ereignisse werden unterschiedlich behandelt, indem das Ereignis -Typ -Attribut erfasst wird.
Zum Beispiel: Definieren Sie eine Handlerfunktion, um 3 Arten von Ereignissen zu verarbeiten: Klicken, Mausover, Mausout.
<body> <input id = "btn" type = "button" value = "klicken"/> <script> var Handler = Funktion (Ereignis) {Switch (Ereignis.Typ) {case "click": alert ("geklickt"); brechen; Fall "Mouseover": event.target.style.backgroundcolor = "pink"; brechen; Fall "Mouseout": event.target.style.backgroundcolor = ""; }}; var btn = document.getElementById ("btn"); btn.onclick = Handler; btn.onmouseover = Handler; btn.onmouseout = Handler; </script> </body>Ausführen von Effekt: Klicken Sie auf die Schaltfläche und das Feld wird angezeigt. Wenn die Maus durch die Taste passt, wird die Hintergrundfarbe der Knopf rosa. Wenn die Maus die Taste verlässt, kehrt die Hintergrundfarbe zur Standardeinstellung zurück.
C. Vergleich der StopPropagation () und StopimmediatePropagation ()
Gleiches: StopPropagation () und StopimmediatePropagation () können verwendet werden, um die weitere Erfassung oder das Ausblenden von Ereignissen abzubrechen.
Unterschied: Der Unterschied zwischen den beiden besteht darin, dass StopiMediatePropagation (), wenn ein Ereignis über mehrere Ereignishandler verfügt, verhindern kann, dass der Ereignishandler später aufgerufen wird.
Zum Beispiel:
<body> <input id = "btn" type = "button" value = "klicken"/> <skript> var btn = document.getElementById ("btn"); btn.addeventListener ("click", function (Ereignis) {console.log ("Buttn klicken Sie einmal angehört"); // Ereignis.StopPropagation (); // Überzeugungseffekt // Ereignis.StopimmediatePropagation (); // Überzeugungseffekt}, Falsch); btn.addeventListener ("klicken", function () {console.log ("Schaltfläche Klicken Sie zweimal gehört");}, false); document.body.onclick = function (Ereignis) {console.log ("Body Clicked"); } </script> </body>Laufeffekt:
D, EventPhase
Der Ereignisphasenwert beträgt 1 in der Erfassungsphase, 2 in der Zielphase und 3 in der Blasenphase.
Beispiel:
<body> <input id = "btn" type = "button" value = "klicken"/> <script> var btn = document.getElementById ("Btn"); Btn.onclick = Funktion (Ereignis) {console.log ("Taste DOM0-Level-Methode Add Event Handler EventPhase Value Wert ist? "+event.eventphase);} btn.addeventListener (" click ", function (event) {console.log (" Button DOM2-Level-Methode fügt Ereignishandler hinzu, und der Ereignisphase-Wert ist "+event.eventphase);}, true); Handler, und der Ereignishase -Wert ist "+event.EventPhase);}, false); document.body.addeventListener ("click", function (Ereignis) {console.log ("Body fügt Ereignishandler hinzu, und der Ereignishase -Wert lautet"+Ereignis.EventPhase);}, true); document.body.addeventListener ("Click", Funktion (Ereignis) {console.log ("Body addiert Ereignishandler und der Ereignis und der Ereignis und der Ereignis. "+event.eventphase);}, false); </script>Laufeffekt:
2. Öffentliche Veranstaltungsmitglieder in IE
Die Eigenschaften und Methoden der Ereignisse im IE variieren von Ereignisart zu DOM, einige sind jedoch öffentliche Mitglieder, die alle Objekte haben, und die meisten dieser Mitglieder haben entsprechende DOM -Eigenschaften oder -Methoden.
Das obige ist die relevante Kenntnis der öffentlichen Mitglieder (Attribute und Methoden) des Ereignisses, die der Herausgeber Ihnen vorgestellt hat (IV), und ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht!