Ereignisse sind eine Implementierungsmethode der asynchronen Programmierung, im Wesentlichen Kommunikation zwischen verschiedenen Komponenten des Programms, und das DOM unterstützt eine große Anzahl von Ereignissen.
In diesem Artikel werden diese Punkte verwendet, um die Grundprinzipien der Ereignisverarbeitung im Detail zu analysieren: Ereignistyp, Ereignisziel, Ereignishandler, Ereignisobjekt, Ereignisausbreitung
Schließlich werde ich Ihnen das Ereignisobjekt vorstellen.
1. Ereignistyp: Ist eine vollständige Kleinbuchstaben -Zeichenfolge, mit der angibt, welche Art von Ereignis aufgetreten ist, wie z. B. "Mouseover"
Traditionelle Ereignisarten: Formularereignisse, Fensterereignisse, Mausereignisse, Tastaturereignisse, DOM -Ereignisse, HTML5 -Ereignisse, Touchscreen und Mobilgeräteereignisse usw.
2. Ereignisziel: Das Objekt, das das Ereignis auslöst
3. Event -Hörer: Eine Funktion, die Ereignisse übernimmt oder auf Ereignisse reagiert. Wenn ein Objekt ein Ereignis auslöst, ruft der Browser die im Objekt registrierte Funktion automatisch auf.
Registrieren Sie Event -Handler (Ereignisse anhören):
1. Registrieren Sie sich als HTML -Attribute (es wird nur in der sprudelnden Phase ausgelöst) wie <table id = "t" onclick = "modifyText ();">; und einige Ereignisstypen werden normalerweise direkt auf dem Browser und nicht auf einem bestimmten Dokumentelement ausgelöst. Diese Event -Handler werden auf das <body> -Tag platziert, aber der Browser registriert sie auf dem Fensterobjekt, wie z.
on nach
OnPageHide OnStorage OnbeforeUnload OnPageshow Onundo
Onblur OnMessage Onpopstate Onun -Load Oneerror Onoffline Onredo
Der Wert des Ereignisses als HTML -Attribut ist eine JS -Codezeichenfolge, die der Körper der Verarbeitungsfunktion ist und nicht {} enthält. Hinweis: Versuchen Sie, Ereignisse nicht auf anderen HTML -Tags zu registrieren. Es verstößt gegen das Trennung von HTML- und JavaScript -Code. Wenn die Ereignisfunktion vor dem Laden auf das Ereignisobjektelement klicken kann, verursacht dies einen Fehler.
2. Registrieren Sie sich als Attribut des DOM -Elements (es wird nur in der Blasenstufe ausgelöst). Zu diesem Zeitpunkt muss der Name des Ereignis -Handler -Attributs mit 'On' vorangestellt werden. Diese Methode ist mit allen Browsern kompatibel. Der einzige Nachteil ist, dass es nur eine Ereignishandlerfunktion registrieren kann. Wenn das Onclick -Attribut zweimal definiert ist, überschreibt die letztere Definition das vorherige. Zum Beispiel: window.onload = function () {...};
3. In allen Browsern außer IE8 und früheren Versionen werden die Ereignisvorgänge (Hören und Auslösen) von DOM in der EventTarget -Schnittstelle definiert. Diese Schnittstelle wird für den Elementknoten, den Dokumentknoten und den Fensterobjekt bereitgestellt. Darüber hinaus haben die integrierten Objekte des Browsers wie XMLHTTPREQUEST, Audionode, Audiocontext usw. auch diese Schnittstelle bereitgestellt. Es gibt drei Methoden dieser Schnittstelle, AddEventListener und REMEDEVENTLILILISTERER werden verwendet, um die Hörerfunktionen zu binden und zu entfernen, und DispatchEvent wird verwendet, um Ereignisse auszulösen.
Mit der Methode AddEventListener (Typ, Listener, Boolean) wird zur Registrierung des Hörers verwendet. Der dritte Parameter legt die Ereignisausbreitungsmethode fest. Normalerweise wird der Standardwert False verwendet, was bedeutet, dass die Hörfunktion nur in der Blasenstufe (Puppen) ausgelöst wird. Wenn dies auf True gesetzt ist, bedeutet dies, dass die Hörfunktion in der Erfassungsstufe (Capture) ausgelöst wird. Mehrere Hörer können für dasselbe Ereignis auf demselben Objekt registriert werden, und alle Hörer werden in der Registrierungsauftrag ausgelöst (die Registrierung doppelter Hörer wird vom Browser ignoriert).
Wenn Sie Parameter an die Hörfunktion übergeben möchten, können Sie die Hörfunktion mit anonymen Funktionen wie Elm.adDeDEventListener ('Click', Function () {Listen ('Real Argument')}, False) einwickeln;
Wenn der registrierte Hörer eine Referenzvariable für die Funktion ist, können Sie REMEDEVENTLESTENER (Typ, Hörer, Boolean) verwenden, um den Hörer auf dem Ereignisziel zu löschen. Die Bubble -Ereignisse und Erfassung von Ereignissen desselben Hörereignisses müssen separat gelöscht werden, und die beiden stören sich nicht miteinander.
var div = document.getElementById ('div'); var louser = function (Ereignis) { / * mach hier etwas * /}; Div.AdDeVentListener ('Click', Listener, False); Div.RemoveEventListener ('Click', Listener, False);Die DispatchEvent (Ereignis) -Methode löst das angegebene Ereignis auf dem aktuellen Knoten manuell aus, wodurch die Ausführung der Hörfunktion ausgelöst wird. Diese Methode gibt einen Booleschen Wert zurück. Solange eine Hörfunktion Ereignis aufruft. Ansonsten ist es wahr. Der Parameter ist eine Instanz eines Ereignisobjekts. Der Parameter kann nicht leer sein und muss ein gültiges Ereignisobjekt sein, andernfalls wird ein Fehler gemeldet.
Btn.AddeVentListener ('Click', Listener, False);
var e = neues Ereignis ('Click');
Btn.DispatchEvent (e); // Das Klickereignis wird sofort auf BTN ausgelöst, und der Hörer wird sofort aufgerufen
Das folgende Beispiel bestimmt, ob das Ereignis basierend auf dem Rückgabewert der DispatchEvent -Methode storniert wurde.
var storniert =! btn.dispatchEvent (Ereignis);
if (storniert) {console.log ('Ereignisabbrechen'); }
sonst {console.log ('Ereignis nicht storniert'); }}
4. IE8 und frühere Versionen unterstützen nur AttenEvent (Typ, Hörer) und Ablösung (Typ, Hörer). Ihre Verwendung und AddEventListener sind unterschiedlich: a. Es gibt nur zwei Parameter; B. Der Parametertyp muss mit 'on' vorangestellt werden; C. Es ermöglicht eine wiederholte Registrierung desselben Hörereignisses und wird aufgerufen. D. Die Verwendung der Anhang -Event -Methode ist ein Nachteil, dass der Wert davon zu einem Fensterobjekt anstelle des Elements wird, das das Ereignis auslöst.
Aufrufen von Auftragsproblemen: 1). Handler, die durch Einstellen von Objekteigenschaften oder HTML -Attributen registriert sind, werden immer zuerst bezeichnet.
2). Bei AddEventListener registrierte Handler werden in ihrer Registrierungsbestellung aufgerufen.
3). Handler, die bei AttachEvent im Legacy registriert sind, dh in jeder Reihenfolge eingerufen werden können.
Rückgabewertproblem:
1). Der Rückgabewert des Ereignishandlers ist nur für den durch Attribute registrierten Handler von Bedeutung. Das Registrieren des Rückgabewerts des Ereignishandlers durch Einstellen des Objektattributs oder des HTML -Attributs auf False bedeutet, dem Browser zu sagen, dass er die Standardoperationen, die sich auf dieses Ereignis beziehen, nicht ausführen soll. Wenn der Browser zu einer neuen Seite springen möchte, wird das OnbeforeUnload -Ereignis des Fensterobjekts ausgelöst. Wenn sein Rückgabewert eine Zeichenfolge ist, wird sie im Dialogfeld "Abfragebestätigung" angezeigt.
2) .AdDeVentListener () oder AttachEvent () Registrieren Sie den Event -Handler. Um den Standardvorgang des Browsers zu stornieren, müssen Sie die Methode PURDDEFAULT () aufrufen oder die Rückgabe -Value -Eigenschaft des Ereignisobjekts festlegen.
Dies weist auf das Problem hin:
1). Die von der AddEventListener -Methode angegebene Hörfunktion, das interne dieses Objekt zeigt immer auf den Knoten, der das Ereignis auslöst.
2). Diese der von IE8 und früheren Anhangs -Methoden registrierten Ereignishandlerfunktion weist auf das globale Objekt hin.
All dieses Objekt zeigt auf die folgende Weise auf den Elementknoten.
element.onclick = print;
element.addeventListener ('klicken', drucken, false)
element.onclick = function () {console.log (this.id);}
<element onclick = "console.log (this.id)">
Dieses Objekt zeigt auf die folgende Weise auf das globale Objekt.
element.onclick = function () {dosomething ()};
element.setAttribute ('onclick', 'dosomething ()');
<elements onclick = "dosomething ()">
element.attachEvent ('onclick', doomething) // IE8
Speicherproblem: Für den folgenden Code wird in jeder Schleife eine neue anonyme Funktion erstellt, und der Speicher wird immer mehr konsumiert. Da es nicht auf den Hinweis auf die anonyme Funktion gehalten wird, kann es nicht removentListener bezeichnet werden. Daher sollte der zweite Parameter -Hörer als Verweis auf die Verarbeitungsereignisfunktion aufbewahrt werden.
für (i = 0; i <elsength; i ++) {els [i] .AdDeVentListener ("Click", Funktion (e) {/*etwas*/}, false}); }Allgemeine Werkzeugfunktionen, die mit älterem IE kompatibel sind: IE:
Stellen Sie sicher, dass dieses Toolfunktions -AddEvent des Ereignishandlers auf das Zielobjekt des Ereignisses verweist
Funktion addEvent (Ziel, Typ, func) {if (target.addeVentListener) {target.adDeVentListener (Typ, func, false); } else {target.attachEvent ('on'+type, Funktion (e) {// Die von AttachEvent hier registrierte Verarbeitungsfunktion ist nicht an eine Referenz gebunden, daher ist es unmöglich, eine Ablösung zu verwenden, um die Rückgabe func.call (target, e);}) zu verwenden; }}Allgemeiner Ereignishandler (aufgrund von IE8 und früheren Versionen, dem Auftragshandler als Ereignisziel benötigt das Fenster. Event, um das Ereignisobjekt zu erhalten, und das Zielknotenobjekt, das das Ereignis auslöst, wird über das Ereignis erhalten. Srcelement-Eigenschaft)
Funktion func (Ereignis) {var Event = Ereignis || window.event; var target = event.target || event.srcelement; //......handler Code}4. Ereignisausbreitung: Es ist der Prozess, mit dem der Browser entscheidet, welches Objekt seinen Ereignishandler auslöst.
Der im "DOM2 Level -Ereignis" angegebene Ereignisfluss enthält drei Stufen: Ereigniserfassungstufe ==> in der Zielstufe ==> Ereignisblasenstufe. Das erste, was passiert, ist die Ereigniserfassungsphase (die sich von der äußeren Schicht zur inneren Schicht ausbreitet), die allen Knoten die Möglichkeit bietet, die das Ereignis übergeht, um Ereignisse abzufangen. Dann gibt es das tatsächliche Ereignis zur Zielempfang (ausgeführt in Registrierungsreihenfolge). Die letzte Stufe ist die sprudelnde Stufe (sprudelt von der inneren Schicht zur Außenschicht).
Wenn Containerelemente und verschachtelte Elemente, dh wenn Ereignishandler in der Capture -Phase und in der Blasenphase aufgerufen werden
Wenn Sie möchten, dass das Ereignis einen bestimmten Knoten erreicht und sich nicht mehr ausbreitet, gibt es zwei Möglichkeiten:
1. Verwenden Sie das Ereignis.
2. Verwenden Sie das Ereignis.
Delegation von Ereignissen: Da sich Ereignisse in der Blasenstufe auf den übergeordneten Knoten ausbreiten, kann die Hörfunktion des untergeordneten Knotens auf dem übergeordneten Knoten definiert werden, und die Hörfunktion des übergeordneten Knotens kann Ereignisse mehrerer untergeordneter Elemente gleichmäßig verarbeiten.
5. Ereignisobjekt (Ereignis): Nach dem Ereignis wird ein Ereignisobjekt generiert und als Parameter an die Hörfunktion übergeben. Der Browser bietet nativ ein Ereignisobjekt, und alle Ereignisse sind Instanzen dieses Objekts oder erbt das Ereignis.Prototyp -Objekt. Das Ereignisobjekt selbst ist ein Konstruktor, mit dem neue Instanzen generiert werden können.
var ev = neuer Ereignis ("Look", {"Bubbles": True, "Cancelable": false});
document.dispatchEvent (ev);
Der Ereigniskonstruktor akzeptiert zwei Parameter. Der erste Parameter ist eine Zeichenfolge, die den Namen des Ereignisses angibt. Der zweite Parameter ist ein Objekt, das die Konfiguration des Ereignisobjekts angibt. Dieser Parameter kann die folgenden zwei Eigenschaften haben.
Blasen: Booleaner Wert, optional, Standard ist falsch und gibt an, ob das Ereignisobjekt sprudelt.
Abbrechen: Boolescher Wert, optional, Standard ist falsch und gibt an, ob das Ereignis storniert werden kann.
Eigenschaften des Ereignisobjekts:
1. im Zusammenhang mit der Phase des Ereignisses:
Bubbles: Schreibgeschützte Eigenschaft, gibt einen booleschen Wert zurück, der angibt, ob das aktuelle Ereignis sprudelt. Verschiedene Funktionen können basierend darauf aufgerufen werden, ob das Ereignis sprudeln wird.
EventPhase: Gibt einen Ganzzahlwert zurück (einer von 0,1,2,3), der den aktuellen Zustand des Ereignisses angibt
<0, das Ereignis ist noch nicht aufgetreten.
<1, das Ereignis befindet sich derzeit in der Erfassungsstufe, dh es ist im Prozess der Ausbreitung vom Vorfahrenknoten zum Zielknoten. Der Vorgang erfolgt vom Fensterobjekt zum Dokumentknoten, dann zum HTMLHTMLELEMENT -Knoten, bis der übergeordnete Knoten des Zielknotens.
<2, das Ereignis erreicht den Zielknoten, dh der Knoten, auf den das Zielattribut zeigt.
<3, das Ereignis befindet sich in der Bubble -Stufe, dh im hinteren Ausbreitungsprozess vom Zielknoten zum Vorfahrenknoten. Dieser Vorgang erfolgt vom übergeordneten Knoten bis zum Fensterobjekt. Diese Stufe kann nur auftreten, wenn das Attribut des Blasen wahr ist
2.. Bezogen auf das Standardverhalten von Ereignissen:
Abbrechen: Gibt einen Booleschen Wert zurück, der angibt, ob das Ereignis storniert werden kann. Wenn Sie ein Ereignis stornieren möchten, müssen Sie die Verhinderung für dieses Ereignis aufrufen
Standardprevented: Gibt einen booleschen Wert zurück, der angibt, ob die Verhinderung der Default -Methode aufgerufen wurde.
3.. Bezogen auf den Zielknoten des Ereignisses:
CurrentTarget: Gibt den Knoten zurück, der an die Hörfunktion der Ereignisausführung gebunden ist.
Ziel: Gibt den Knoten zurück, der das Ereignis ausgelöst hat. In IE6-IE8 ist der Name dieser Eigenschaft kein Ziel, sondern ein Srcelement
4.. Bezogen auf andere Informationen zum Ereignisobjekt:
Typ: Gibt eine Zeichenfolge zurück, die den Ereignistyp darstellt
Detail: Gibt einen numerischen Wert zurück, der einige Informationen zum Ereignis darstellt. Die spezifische Bedeutung bezieht sich auf den Ereignisart. Für Mausereignisse bedeutet dies, dass die Häufigkeit der Maustaste an einer bestimmten Position gedrückt wird. Zum Beispiel beträgt der Wert des Detailattributs für DBLCLICK -Ereignisse immer 2.
TIMESTAMP: Gibt einen Millisekunden -Zeitstempel zurück, was die Zeit angibt, in der das Ereignis aufgetreten ist. Die Berechnung beginnt von Performancetiming.NavigationStart, was bedeutet, dass der Benutzer zur Navigation zur Webseite benötigt wird. Wenn Sie diesen Wert in einen UNIX -Epoch -Zeitstempel konvertieren möchten, müssen Sie Ereignisse berechnen. Timestamp + Performance.Timing.NavigationStart
iStrusted: Gibt einen booleschen Wert zurück, der angibt, ob das Ereignis vertrauenswürdig ist. Nicht sehr nützlich, verschiedene Browserunterstützung sind unterschiedlich.
Methoden des Ereignisobjekts:
PREVENTDEFAULT (): Storniert das Standardverhalten des Browsers für das aktuelle Ereignis. Die Prämisse für diese Methode ist, dass die stornierbare Eigenschaft des Ereignisses wahr ist. Wenn dies falsch ist, hat die Aufrufen dieser Methode keinen Einfluss.
StopPropagation (): Beenden Sie das Ereignis, um sich während der Erfassung, der Zielverarbeitung oder der Blasenstufe des Ausbreitungsprozesses weiter zu verbreiten. Nach dem Aufrufen dieser Methode wird der Handler auf dem Knoten, der das Ereignis behandelt, und das Ereignis wird nicht mehr an andere Knoten geschickt. HINWEIS: Diese Methode kann nicht verhindern, dass andere Ereignisgriffe auf demselben Dokumentknoten aufgerufen werden, aber sie können verhindern, dass Ereignisse an andere Knoten geschickt werden.
StopimmediatePropagation (): verhindert, dass andere Hörfunktionen das gleiche Ereignis aufgerufen werden. Solange eine der Hörfunktionen die Methode aufruft, werden die anderen Hörfunktionen nicht erneut ausgeführt.
Referenzlink:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Autoritative JavaScript -Handbuch 6. Ausgabe
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.