Während des Front-End-Entwicklungsprozesses stoßen wir häufig auf das Problem des Hinzufügens von Ereignissen zu Seitenelementen. Es gibt auch viele JS -Methoden zum Hinzufügen von Ereignissen, einschließlich direkter Hinzufügung der Seitenstruktur und einigen JS -Ereignisüberwachungsmethoden. Da jeder Browser über unterschiedliche Mechanismen für die Überwachung von Ereignisblasen verfügt, verfügt der Le Browser nur mit Ereignisblasen und keinen Ereignisüberwachungsmechanismus, und das Kompatibilitätsproblem des Ereignishörens ist das größte Problem:
1. Schreiben Sie die Ereignismethode direkt auf die Seitenstruktur
Funktion eventFun () {//console.log(This); } <input type = "button" onclick = "eventFun ()" value = "button"/> // Dies beinhaltet ein Problem dieses Bereichs. EventFun ist auch hier eine globale Funktion. Das Objekt ist [Objektfenster] und dies zeigt auf das Fenster.Um dieses Umfangsproblem zu lösen, können Sie die Methode zum Hinzufügen von Ereignisvariablen zur globalen Funktion verwenden und dieses Objekt als Parameter an die Funktion innerhalb der Seitenstruktur übergeben
<input type = "button" onclick = "eventFun2 (this)" value = "button2"/> Funktion eventFun2 (Eve) {// Hier wird das Ereignisobjekt als Parameter an die globale Methode Eve.Name = "Alex" übergeben. Fenster.Name = "Robin"; console.log (this); // [Objektfenster] console.log (Eve); // [Objekt htmlinputelement] console.log (this.name); // Robin console.log (Eve.Name); // Alexvar self = Eve; console.log (this.name); // Robin console.log (self.name); // Alex Alert (window.name); alarm (self.name); }2. Die Methode zur Zuweisung von Wert zu Ereignisattributen ist eine Methode zur Bindung an Ereignisse, aber die Einschränkung dieser Methode besteht darin, dass sie nur eine Methode an Ereignisse binden kann. Wenn mehrere Bindungen gebunden sind, wird eine Methode herrschen.
HtmlelementObject.onclick = fucntion () {// Verwenden Sie diese Methode, um Ereignisattributen Wert zuzuweisen
// JS Code Fun1 (); fun2 (); fun3 (); console.log (this); // window.object} function dosomething () {// js code} htmlelementObject.onclick = dosomething; // Verwenden Sie diese Form des Wertes von Ereignisobjektattributen, diese Zeiger -Objekt -Objektkonsole.log.Log (this); // htmlelementoBection.3. Ereignisausbreitung - Blase und Erfassung
Der DOM -Ereignisstandard definiert zwei Ereignisströme, die erheblich unterschiedlich sind und möglicherweise erhebliche Auswirkungen auf Ihre Anwendung haben. Diese beiden Ereignisströme sind Capture und Blasen. Wie viele Webtechnologien haben Netscape und Microsoft sie anders implementiert, bevor sie Standard wurden. Netscape entschied sich für die Implementierung von Capture -Event -Streams, während Microsoft Bubble -Event -Streams implementierte. Glücklicherweise entschied sich W3C, beide Methoden in Kombination zu verwenden, und die meisten neuen Browser folgen diesen beiden Ereignis -Streaming -Methoden.
Standardmäßig verwenden Ereignisse Bubble -Ereignisströme und es werden keine Erfassungsereignisse verwendet. In Firefox und Safari können Sie jedoch explizit die Verwendung von Capture -Ereignisströmen angeben, indem Sie beim Registrieren des Ereignisses und beim Einstellen dieses Parameters auf True den Parameter UseCapture eingeben.
Bubble Event Stream
Wenn ein Ereignis in einem DOM -Element ausgelöst wird, klickt der Benutzer beispielsweise auf die Maus auf den Client -Namensknoten, das Ereignis folgt den verschiedenen übergeerkten Knoten, von denen der Knoten durch die gesamte DOM -Knotenhierarchie blüht, bis es auf einen Knoten stößt, der dem Ereignisart -Prozessor angehängt wird. Zu diesem Zeitpunkt ist die Veranstaltung das Onclick -Event. Das Sprudeln von Ereignissen kann jederzeit während des sprudelnden Prozesses beendet werden. In Browsern, die den W3C -Standards entsprechen, können Sie die StopPropagation () -Methode auf dem Ereignisobjekt aufrufen. In Internet Explorer können Sie das CancelBubble -Attribut des Ereignisobjekts auf True einstellen. Wenn das Ereignis nicht gestoppt wird, sprudelt das Ereignis durch das DOM, bis es die Dokumentwurzel erreicht.
Ereignisflow
Die Verarbeitung des Ereignisses beginnt auf der Wurzel der DOM -Ebene und nicht aus dem Zielelement, das das Ereignis auslöst, und das Ereignis wird nacheinander aus allen Vorfahren des Zielelements weitergegeben. In diesem Prozess werden die Ereignisse von verschiedenen ererbten abgeleiteten Elementen aus der Dokumentwurzel zum Ereigniszielelement erfasst. Wenn der Ereignishörer bei der Registrierung das Attribut usecapture auf true festlegt, können sie in diesem Zeitraum jedem Element zugewiesen werden, um das Ereignis zu verarbeiten. Andernfalls werden anschließend Ereignisse an das nächste Element auf dem abgeleiteten Elementpfad bis zum Zielelement übergeben. Nachdem das Ereignis das Zielelement erreicht hat, sprudelt es den DOM -Knoten durch.
Moderne Ereignisbindungsmethode
Für die vorherige Lektion hat die Verwendung der traditionellen Ereignisbindung viele Nachteile, z. Und Browser und W3C sind nicht ohne dies zu berücksichtigen, so dass sie in modernen Browsern ihre eigenen Methoden haben, um Ereignisse zu binden.
W3c Dom
OBJ.AddeVentListener (EVTYPE, FN, Uscapture) - W3C bietet eine Methode zum Hinzufügen von Ereignisbearbeitungsfunktionen. OBJ ist das Objekt zum Hinzufügen von Ereignissen. EVTYPE ist der Ereignisart, ohne auf Präfix, FN ist die Ereignishandlerfunktion. Wenn Usecapture wahr ist, wird die Ereignishandlerfunktion in der Erfassungsstufe ausgeführt, sonst wird sie in der Blasenphase ausgeführt
OBJ.REMOVENEventListener (EVTYPE, FN, Uscapture)-W3C bietet eine Methode zum Löschen von Ereignisbearbeitungsfunktionen
Microsoft IE -Methode
OBJ.ATTACHEvent (EVTYPE, FN) - Die vom IE bereitgestellte Methode zum Hinzufügen von Veranstaltungsbearbeitungsfunktionen. OBJ ist das Objekt zum Hinzufügen von Ereignissen. EvType ist der Ereignisart, mit dem auf Präfix, FN ist die Event -Handler -Funktion, IE unterstützt keine Ereigniserfassung nicht
Obj.DetacheAvent (EVTYPE, FN,) - IE bietet eine Methode zum Löschen von Ereignisbearbeitungsfunktionen, EVTYPE enthält das Präfix
Ein Weg, um beide zu integrieren
Funktion addEvent (obj, evType, fn, usecapture) {if (obj.addeventListener) {obj.addeventListener (evType, fn, usecapture); } else {obj.attachEvent ("on"+evtype, fn); // ie unterstützt Ereigniserfassung nicht} else {obj ["on"+evtype] = fn; // Tatsächlich wird diese Situation nicht existieren}} Funktion DEPENT (OBJ, EVTYPE, FN, Usecapture) {ifj.f. obj.removeventListener (evType, fn, usecapture); } else {obj.detACHEvent ("on"+evType, fn); } else {obj ["on"+evType] = null; }}Es gibt ein Problem mit der IE -Anhang -Methode, nämlich, dass diese bei Verwendung von AttachEvent auf das Fenster zeigt, nicht auf obj! Natürlich gibt es dafür eine Lösung!
Aber es gibt ein weiteres Problem mit der Bindementent -Methode von IE. Die gleiche Funktion kann mehrmals mit demselben Objekt und demselben Ereignis registriert werden. Lösung: Verlassen Sie die IE -Bindungsemethode von IE! Die AttafEvent -Methode unter IE unterstützt keine Capture, die sich nicht wesentlich von der herkömmlichen Ereignisregistrierung unterscheidet (mit Ausnahme mehrerer Ereignishandler), und die Anhangsmethode des IE hat ein Speicher -Leck -Problem!
AddEvent, DELEVENT Moderne Version
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<title> js Ereignishörer </title> <style> table td {fest: 12px; Border-Bottom: 1PX Solid #efefef; Onclick = "EventFun2 (this);" id = "button2" value = "button2" /> <br /> <input type = "button" id = "button3" value = "button3" /> <br /> <Eingabe type = "button" id = "button4" value = "button4" /> <br /> <table id = "htmLeletable" style = "style =" borte: 1px solide #b2b2; id = "1111"> <td> 11111111111111111111111111 </td> </tr> <tr id = "22222"> <td> 222222222222222222222222222222 </td> </tr> <Tr> <Tr> <Tr> <Tr> <Tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> </tr> <tr> <tr> <tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tR> </tre ID = "33333333333333333333333333333333333 </td> </tr> <tr id="44444"><td>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </td> </tr> <tr id = "5555555555555555555555555555 </td> </tr> </table> </div> <script Language =" javascript "type =" text/javaScript "> Funktion EventFun () {// 1. Schreiben Sie die JS -Methode direkt auf die Seitenstrukturkonsole.log (this); // Dies beinhaltet ein Problem mit diesem Bereich. Ereignisfun ist eine globale Funktion, das Objekt ist ein Fenster, und dies weist auf Fensteralarm (dies) hin. } function EventFun2 (Eve) {// hier das Ereignisobjekt als Parameter an die globale Methode Eve.Name = "Alex"; // Window.Name = "Robin" übergeben; console.log (this); // [Objektfenster] console.log (Eve); // [Objekt htmlinputElement] console.log (this.name); // Robin console.log (Eve.Name); // Alex var self = Eve; console.log (this.name); // Robin console.log (self.name); // Alex Alert (window.name); alarm (self.name); } function EventFun3 () {// 1. Schreiben Sie die JS -Methode direkt auf die Seitenstrukturkonsole.log (this); // Dies beinhaltet ein Problem dieses Bereichs. EventFun ist eine globale Funktion, das Objekt ist ein Fenster, und dies zeigt auf Window Console.log (this.id); alarm (dies); alarm (dies); alarm (this.id); // var outeleobj = eventUtil. $ ("outele"); // removent (outeleobj, "click", eventFun3); } /* var eventUtil = {}; EventUtil. $ = Function (id) {return document.getElementById (id); } EventUtil.openmes = eventFun3; EventUtil.addeventHandle = function (eventTarget, eventType, eventHandle) {// Definieren Sie das Objektelement, Ereignistyp für Ereignishörer, Ereignisfunktion if (EventTarget.attaCHEvent) {EventTarget.attaCHEvent ("on"+EventType, EventHandle); } else if (eventTarget.adDeVentListener) {eventTarget.addeVentListener (eventType, eventHandle, false)} else {eventTarget ["on" + eventType] = null; }}; EventUtil.deleEventHandle = function (eventTarget, eventType, eventHandle) {// Definieren Sie das Objektelement, Ereignistyp für das Ereignishören, Ereignisfunktion if (eventTarget.detACHEvent) {alert ("on"+EventType); alert ("on"+EventHandle); EventTarget.DetACHEvent ("on"+EventType, EventHandle); } else if (eventTarget.removeEventListener) {eventTarget.removeEventListener (eventType, eventHandle, false)} else {eventTarget ["on" + eventType] = null; }};*/ var eventUtil = {$: function (id) {return document.getElementById (id); }, But4fun: function () {console.log (this); this.addeventHandle (); }, eventFun3: function () {console.log (this); alarm (dies); DEPEVENT (OBJ, EVTYPE, FN, Usecapture); }} /*** Verwenden Sie AddEventListener, AttachEvent for Hörfunktion AddEvent (obj, evType, fn, usecapture) {if (obj.addeventListener) {obj.addeventListener (evtype, fn, usecapture); } else if (obj.attachEvent) {obj.attachEvent ("on"+evType, function () {fn.call (obj);}); } else {obj ["on"+evType] = fn; // In der Tat wird diese Situation nicht existieren}} Funktion DEPENT (OBJ, EVTYPE, FN, Usecapture) {if (obj.removeEventListener). } else if (obj.detACHEvent) {obj.detACHEvent ("on"+evtype, fn); } else {obj ["on"+evType] = null; }} function addEvent (obj, evType, fn, usecapture) {if (obj.addeventListener) {// Priorität wird dem W3C -Ereignisregistrierungsschema Obj.addeventListener (evtype, fn, !! usecapture) gegeben; } else {// Wenn AddEventListener nicht unterstützt wird (dh), da IE nicht gleichzeitig die Capture unterstützt, ist es besser, eine traditionelle Ereignisbindung zu verwenden, wenn (! fn .__ eventId) {fn .__ eventId = addEvent .__ EventHandlesCounter ++;} // Einzigartige Ereignis -Ereignis -Ereignis -Event -Event -Event -Event -Ereignis -Ereignis {} Ereignis {} Ereignis {} Ereignis {} {} Event {} {} {obj .__. // _ EventHandles -Attribut wird verwendet, um Referenzen auf alle Ereignishandler zu speichern // nach Ereignistyp klassifiziert if (! Obj .__ eventHandles [evType]) {// Zum ersten Mal ist ein Ereignis registriert .__ EventHandles [evType] = {}; if (obj["on"+evtype]) {//The event handling function has been registered in the traditional way before (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//Add to the reserved 0 bits// and add an ID to the original event handling function } obj ["on"+evType] = addEvent.execeventHandles; //When an event occurs, execEventHandles traverse the table obj.__EventHandles[evtype] and execute the function in it} } } } addEvent.__EventHandlesCounter=1;//Counter, 0 bit reserved it with addEvent.execEventHandles = function (evt) {//Tranquility through all event handlers and execute if (!this.__EventHandles) {return true;} evt = evt || Fenster.Event; var fns = this .__ eventHandles [evt.type]; für (var i in fns) {fns [i] .call (this); }}; /* Funktion DEPEVENT (OBJ, EVTYPE, FN, UseCapture) {if (obj.removeEventListener) {// Verwenden Sie zunächst die W3C -Methode, um die Ereignishandlerfunktion Obj.removeEventListener (evtype, fn, !! usecapture) zu entfernen; } else {if (obj .__ eventHandles) {var fns = obj .__ eventHandles [evType]; if (fns) {delete fns [fn .__ eventId];}}}}} Funktion FixeVent (evt) {// Die FixeVent -Funktion wird nicht separat ausgeführt. Es muss einen Ereignisobjektparameter haben und es wird nur ausgeführt, wenn das Ereignis auftritt! Der beste Weg ist es, es in die ExeceVent -Handles der AddEvent -Funktion zu integrieren, wenn (! Evt.target) {evt.target = evt.srcelement; evt.preventDefault = FixeVent.PreventDefault; evt.StopPropagation = FixEvent.StopPropagation; if (evt.type == "mouseover") {evt.relatedTarget = evt.fromelement; } else if (evt.type == "mausout") {evt.relatedTarget = evt.toELement; } evt.charcode = (evt.type == "keypress")? evt.keycode: 0; evt.eventphase = 2; // dh funktioniert nur in der blasenstufe evt.timestamp = (new Date ()). GetTime (); // Setzen Sie es nur auf die aktuelle Zeit} return evt; } FixeVent.PreventDefault = function () {this.returnValue = false; // Dies zeigt hier auf ein bestimmtes Ereignisobjekt, nicht FixEvent}; fixeVent.StopPropagation = function () {this.cancelBubble = true; };*///console.log(eventutil.$("button3");//Return Das Objektattribut der EventUtil -Funktion //eventutil.$("button3").onclick= Eventfun; // 2. Verwenden Sie die Methode zum Zuweisen von Werten dem Objektereignisattribut, um das Anhören von Ereignissen zu erkennen //eventutil.$("button3") getbyId (id) {return document.getElementById (id); }; // geschrieben von Dean Edwards, 2005 // mit Eingabe von Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent (Element, Typ, Handler) if (element.addevent.addevent.Addevent.AddeventListener) {{addeventristener (element.addeventristener) {{{addeventListener (element.addeventristener) {{{adDeventListieren (Element. } else {// jedem Ereignishandler eine eindeutige ID zuweisen if (! Handler. $$ GUID) Handler. // Erstellen Sie eine Hash -Tabelle mit Ereignisstypen für das Element if (! element.Events) element.events = {}; // Erstellen Sie eine Hash -Tabelle mit Ereignishandlern für jedes Element/Ereignispaar var Handler = Element.Events [Typ]; if (! Handler) {handlers = element.events [type] = {}; // den vorhandenen Ereignishandler (falls es eins gibt) if (Element ["on" + type]) {Handler [0] = Element ["on" + Typ]; }} // den Ereignishandler in den Hash -Tabellenhandlern [Handler. $$ GUID] = Handler speichern; // Weisen Sie einen globalen Ereignis -Handler zu, um das gesamte Arbeitselement ["on" + type] = HandleEvent durchzuführen; }}; // ein Zähler, der verwendet wird, um eindeutige IDs addEvent.guid = 1 zu erstellen; Funktion removentEvent (Element, Typ, Handler) {if (element.removeEventListener) {element.removeEventListener (Typ, Handler, Falsch); } else {// Löschen Sie den Ereignishandler aus der Hash -Tabelle if (element.events && element.events [type]) {delete element.events [type] [Handler. $$ GUID]; }}}; Funktion HandelsEvent (Ereignis) {var returnValue = true; // das Ereignisobjekt greifen (dh verwendet ein globales Ereignisobjekt) Ereignis = Ereignis || FixeVent (((this.OwnerDocument // Erhalten Sie einen Verweis auf die Hash -Tabelle der Ereignishandler var Handler = this.events [Event.type]; // Führen Sie jeden Ereignis -Handler für (var i in Handlern) aus {this. $$ handleEvent = Handler [i] aus; if (this. $$ HandleEvent (Ereignis) === false) {returnValue = false; }} return returnValue; }; Funktion FixEvent (Ereignis) {// W3C Standard -Ereignismethoden Ereignis. Event.StopPropagation = FixEvent.StopPropagation; Rückkehrereignis; }; fixEvent.preventDefault = function () {this.returnValue = false; }; fixeVent.StopPropagation = function () {this.cancelBubble = true; }; function TableadDeVent () {}; return {add: addEvent, remove: removent, $: getbyid}} (); var outeleobj = eventUtil. $ ("outele"); //addevent.apply(EventUtil.[ULELELOBJ,"CLICK ", EventFun3]); //Eventutil.add(outeleobj,"click",Eventfun3); var inputObj = eventUtil. $ ("button4"); var tableele = eventUtil. $ ("htmLelseletable"); var tabtrele = tableele.getElementsByTagName ("tr"); EventUtil.add (TableEle, "Click", EventFun3); für (i = 0; i <tabtrele.length; i ++) {eventUtil.add (Tabrele [i], "click", eventFun3); } EventUtil.remove (tableele, "click", eventFun3); // Event -Löschmethode EventUtil.add (TableEle, "Click", EventFun3); // eventUtil.add (inputObj, "click", eventFun3); //Eventutil.remove(outeleobj,"click",Eventfun3); //Console.log(adDevent); // addEvent (inputObj, "click", eventFun3, true); // DEPEVENT (Outeleobj, "Click", EventFun3, False); </script> </body> </html>PS: Hier bieten wir Ihnen ein Online -Tool über JS -Ereignisse, das die häufig verwendeten Ereignisarten und Funktionsfunktionen von JS zusammenfasst:
Eine vollständige Liste von JavaScript -Ereignissen und -Funktionen:
http://tools.vevb.com/table/javascript_event