Wenn ein Ereignis im DOM ausgelöst wird, wird ein Ereignisobjektereignis generiert.
Ereignisobjekt im DOM
DOM-kompatible Browser übergeben ein Ereignisobjekt an den Ereignishandler. Das Ereignisobjekt enthält Eigenschaften und Methoden, die sich auf das spezifische Ereignis beziehen, das es erstellt hat. Die Ereignistypen der Aufteilung sind unterschiedlich und die verfügbaren Attributmethoden sind unterschiedlich. Für alle Veranstaltungen sind jedoch die in der folgenden Tabelle aufgeführten Mitglieder aufgeführt.
Die durch den Level 2 DOM-Ereignisstandard definierten Eigenschaften sind unten aufgeführt:
Nachfolgend sind die Methoden aufgeführt, die durch den DOM-Ereignisstandard der Stufe 2 definiert sind. Das Ereignismodell des IE unterstützt diese Methoden nicht:
dieses, Ziel, aktuelles Ziel
Im Event-Handler ist das Objekt this immer gleich dem Wert von currentTarget und target enthält nur das tatsächliche Ziel des Ereignisses. Wenn der Event-Handler direkt dem Zielelement zugewiesen ist, enthalten this, currentTarget und target dieselben Werte. Zum Beispiel:
var btn = document.querySelector("#btn");
btn.onclick=function () {
console.log(event.currentTarget === this); //true
console.log(event.target === this); //true
}Da das Ziel des Klickereignisses die BTN-Schaltfläche ist, sind diese drei Werte gleich. Wenn sich der Ereignishandler im übergeordneten Knoten der Schaltfläche (document.body) befindet, sind diese Werte nicht identisch. Zum Beispiel:
var btn = document.querySelector("#btn");
document.body.onclick=function () {
console.log(event.currentTarget === document.body); //true
console.log(this === document.body); //true
console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}
Hier sind this und currentTarget beide document.body, da der Event-Handler für dieses Element registriert ist. Das Zielelement entspricht jedoch dem Schaltflächenelement, da es das eigentliche Ziel des Klickereignisses ist. Da für die Schaltfläche kein Ereignishandler registriert ist, wird das Klickereignis nach document.body weitergeleitet, wo das Ereignis verarbeitet werden kann.
1. Typ
Wenn Sie mehrere Ereignisse über eine Funktion verarbeiten müssen, können Sie das Typattribut verwenden. Zum Beispiel:
//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
switch (event.type) {
case "click":
console.log("i click it");
break;
case "mouseover":
console.log("i enter it");
break;
case "mouseout":
console.log("i leave it");
break;
}
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
2. präventDefault()
Um das Standardverhalten für ein bestimmtes Ereignis zu verhindern, können Sie diese Methode verwenden. Zum Beispiel:
var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
var currentATag = aTags[i];
currentATag.onclick = function() {
event.preventDefault();
}
};
Der obige Code blockiert alle Funktionen eines Tag-Hyperlinks auf der Webseite. Es ist zu beachten, dass nur Ereignisse, deren abbrechbares Attribut auf „true“ gesetzt ist, präventDefault() verwenden können, um ihr Standardverhalten abzubrechen.
3. stopPropagation()
Stoppen Sie sofort die Ausbreitung von Ereignissen in der DOM-Hierarchie, d. h., brechen Sie die weitere Erfassung oder Bubbling von Ereignissen ab. Beispielsweise kann ein direkt einer Schaltfläche hinzugefügter Ereignishandler diese Methode aufrufen, um das Auslösen des in document.body registrierten Ereignishandlers zu vermeiden. Zum Beispiel:
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("btn clicked");
// event.stopPropagation();
};
window.onclick = function () {
console.log("clicked");
};
//单击一下的结果：
//btn clicked
//clicked
Ein weiteres Beispiel:
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("btn clicked");
event.stopPropagation();
};
window.onclick = function () {
console.log("clicked");
};
//单击一下的结果：
//btn clicked
eventPhase
Dieses Attribut wird verwendet, um zu bestimmen, in welcher Phase des Ereignisflusses sich das Ereignis derzeit befindet.
var btn = document.getElementById("btn");
document.body.addEventListener("click", function() {
console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段
btn.onclick = function() {
console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）
document.body.onclick = function() {
console.log("body" + event.eventPhase);
} //冒泡阶段（在body上）
var btn = document.getElementById("btn");
document.body.addEventListener("click", function() {
console.log(event.eventPhase); //1
console.log(event.currentTarget); //HTMLBodyElement
}, true);
btn.addEventListener("click", function() {
console.log(event.eventPhase); //2
console.log(event.currentTarget); //HTMLInputElement
});
document.body.addEventListener("click", function() {
console.log(event.eventPhase); //3
console.log(event.currentTarget); //HTMLBodyElement
});
document.body-Erfassungsphase --> BTN-Zielobjektphase --> document.body-Bubbling-Phase
Das Obige bezieht sich auf JavaScript-Ereignisobjekte. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.
