Tipps zu JavaScript-Ereignisobjekten_javascript

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:

• Blasen: Gibt einen booleschen Wert zurück, der angibt, ob es sich bei dem Ereignis um einen Blasenereignistyp handelt.
  
• cancelable: Gibt einen booleschen Wert zurück, der angibt, ob das Ereignis eine stornierbare Standardaktion haben kann.
  
• currentTarget: Gibt das Element zurück, dessen Ereignis-Listener dieses Ereignis ausgelöst hat.
  
• eventPhase: Gibt die aktuelle Phase der Ereignisausbreitung zurück.
  
• Ziel: Gibt das Element zurück, das dieses Ereignis ausgelöst hat (der Zielknoten des Ereignisses).
  
• timeStamp: Gibt das Datum und die Uhrzeit zurück, zu der das Ereignis generiert wurde.
  
• Typ: Gibt den Namen des Ereignisses zurück, das durch das aktuelle Event-Objekt dargestellt wird.
  

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:

• initEvent(): Initialisiert die Eigenschaften des neu erstellten Event-Objekts.
• preventDefault(): Informiert den Browser, die mit dem Ereignis verbundene Standardaktion nicht auszuführen.
• stopPropagation(): Versendet keine Ereignisse mehr.

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.

• Wenn es sich um die Erfassungsphase handelt, ist es gleich 1;
  
• Wenn es sich um die Zielobjektstufe handelt, ist sie gleich 2;
  
• Wenn es sich um die Sprudelphase handelt, ist es gleich 3;
  
Zum Beispiel:

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上）

Ein weiteres Beispiel:

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
});

Der Prozess ist ungefähr:

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.