Detaillierte Erläuterung des JavaScript-Dom-Ereignisobjekts und der IE-Ereignisobjektinstanz

Ereignisobjekt: Wenn ein Ereignis im DOM ausgelöst wird, wird ein Ereignisobjektereignis generiert. Dieses Objekt enthält alle Informationen im Zusammenhang mit dem Ereignis, einschließlich des Elements, das das Ereignis verursacht hat. Die Art der Veranstaltung und andere Informationen im Zusammenhang mit der jeweiligen Veranstaltung.

Ereignisobjekt im DOM

Ein DOM-kompatibler Browser übergibt ein Ereignisobjekt an den Ereignishandler, unabhängig davon, wann es angegeben wird Im Ereignishandler wird das Ereignisobjekt übergeben, unabhängig davon, ob die DOM0- oder DOM2-Methode verwendet wird. Das Ereignisobjekt existiert nur während der Ausführung des Ereignishandlers. Sobald die Ausführung des Ereignishandlers abgeschlossen ist, wird das Ereignisobjekt zerstört. Das Folgende ist ein Codebeispiel:

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

Das Ereignisobjekt enthält Eigenschaften und Methoden, die sich auf das spezifische Ereignis beziehen, das es erstellt hat. Die Arten von Ereignissen, die ausgelöst werden, sind unterschiedlich, und auch die verfügbaren Eigenschaftsmethoden sind unterschiedlich . Aber alle Ereignisse haben die folgenden Eigenschaften oder Methoden:

• Blasen: Boolescher Wert, der angibt, ob das Ereignis Blasen bildet

• Abbrechenbar: Boolescher Wert , gibt an, ob das Standardverhalten des Ereignisses abgebrochen werden kann

• currentTarget: Element, das Element, in dem der Ereignishandler das Ereignis gerade verarbeitet

• defaultPrevented: Boolescher Wert, der angibt, ob die Methode „preventDefault()“ aufgerufen wurde

• detail: Ganzzahl, detaillierte Informationen zum Ereignis

• eventPhase: Ganzzahl, aufrufendes Ereignis. Die Stufen des Handlers, 1 stellt die Erfassungsstufe dar, 2 stellt die Zielstufe dar und 3 stellt die Blasenstufe dar

• preventDefault(): Funktion, die Standardeinstellung Verhalten beim Abbrechen des Ereignisses, kann aufgerufen werden, wenn cancelable wahr ist. Die Methode

• stopImmediatePropagation(): Funktion, die das weitere Erfassen oder Bubbling von Ereignissen abbricht und gleichzeitig verhindert, dass Event-Handler aufgerufen werden

• stopPropagation (): Funktion, bricht die weitere Erfassung oder Bubbling von Ereignissen ab. Diese Methode kann aufgerufen werden, wenn bubbles wahr ist

• target: element, the Ziel des Ereignisses

• vertrauenswürdig: Boolescher Wert. Wenn wahr, bedeutet dies, dass das Ereignis vom Browser generiert wurde, andernfalls bedeutet es, dass das Ereignis über JS erstellt wurde

• Typ: Zeichenfolge, der Typ des ausgelösten Ereignisses

• Ansicht: Die mit dem Ereignis verknüpfte abstrakte Ansicht, äquivalent zum Fensterobjekt, in dem das Ereignis aufgetreten ist

Das folgende Codebeispiel zeigt die Verwendung einiger der oben genannten Attribute. Es kann uns auch helfen, den Ereignisfluss besser zu verstehen. Angenommen, es gibt eine Schaltfläche „myBtn“ auf der Seite. Wenn auf die Schaltfläche geklickt wird, sind sowohl this als auch currentTarget gleich dem Body-Element, da der Ereignishandler im Body-Element registriert ist. Der Wert von target entspricht dem Button-Element, da es das eigentliche Ziel des Klickereignisses ist. Da für die Schaltfläche kein Ereignishandler registriert ist, wird das „Click“-Ereignis vor der Verarbeitung an document.body weitergeleitet.

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

Sehen Sie sich ein weiteres Beispiel an. Im folgenden Code bricht die Methode stopPropagation() das weitere Erfassen oder Bubbling von Ereignissen ab. Wenn ich auf die Schaltfläche klicke, sollten die Click-Event-Handler auf den Schaltflächen- und Body-Elementen aufgrund des Event-Bubbling-Mechanismus ausgelöst werden und „From Bth...“ und „From Body...“ ausgeben. Jetzt wird verhindert, dass sich das Click-Ereignis weiter in der DOM-Hierarchie nach oben ausbreitet, nachdem es auf das Schaltflächenelement ausgelöst wurde, sodass der Ereignishandler für den Textkörper nicht ausgelöst wird.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

Ereignisobjekt im IE

Im IE fungiert das Ereignisobjekt beim Hinzufügen eines Ereignishandlers mithilfe der DOM0-Methode als window Eine Eigenschaft des Objekts existiert. Wenn es über die Methode attachmentEvent() hinzugefügt wird, wird das Ereignisobjekt als Parameter an die Ereignisverarbeitungsfunktion übergeben. Das Folgende ist ein Codebeispiel:

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

Das Ereignisobjekt von IE enthält auch Eigenschaften und Methoden, die sich auf das Ereignis beziehen, das es erstellt hat. Diese Eigenschaften und Methoden variieren auch je nach Ereignistyp. Alle Ereignisobjekte enthalten jedoch die folgenden Eigenschaften:

• cancelBubble: Boolescher Wert, lesbar und beschreibbar, Standardwert ist „false“. Ereignissprudeln abbrechen, wenn auf „true“ gesetzt

• returnValue: Boolescher Wert, lesbar und beschreibbar, standardmäßig auf „true“ gesetzt. Das Standardverhalten zum Abbrechen des Ereignisses, wenn es auf „false“ gesetzt ist

• srcElment: Element, das Zielelement des Ereignisses, dasselbe wie das Zielattribut im DOM

• Typ: Zeichenfolge, Ereignistyp

Im IE wird der Umfang des Ereignishandlers anhand der Art und Weise bestimmt, wie er angegeben wird. Der Wert davon ist nicht der Fall unbedingt auf das Zielelement des Ereignisses verweisen. Daher ist es sicherer, das srcElement-Attribut zu verwenden. Bitte schauen Sie sich das Codebeispiel unten an. In der ersten Methode ist der Wert von this das Zielelement, und in der zweiten Methode wird, wie bereits erwähnt, der Ereignishandler dieser Methode im globalen Bereich ausgeführt, also der Wert von this ist Fenster.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
 console.log(event.srcElement === this); // false
});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Dom-Ereignisobjekts und der IE-Ereignisobjektinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!