Detaillierte Erläuterung des Ereignisflusses und der Ereignishandler in JavaScript (grafisches Tutorial)

Der Ereignisstrom bezieht sich auf die Reihenfolge, in der Ereignisse von der Seite empfangen werden, während der Ereignishandler die Reaktion auf das Ereignis verarbeitet. Als Nächstes erklären wir den Ereignisstrom und den Ereignishandler in JavaScript im Detail 🎜>Ereignisstrom: Es gibt zwei Arten von Ereignisströmen. Das Ereignis wird vom spezifischsten Element am Anfang empfangen und an weniger spezifische Knoten weitergegeben (Element -> Dokument). Das Gegenteil ist der Event-Capture-Stream von Netscape.

Ereignis auf DOM2-Ebene legt fest, dass der Ereignisfluss drei Phasen umfasst: Ereigniserfassungsphase, Zielphase und Ereignisblasenphase.

In den meisten Fällen werden Event-Handler zur Bubbling-Phase des Event-Flows hinzugefügt. Ein Beispiel für EventUtil:

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent('on' + type, handler); // IE8
    }else{
      element['on' + type] = handler;
    }
  },
  removeHandler: function(){...}
}

Schauen wir es uns im Detail an:

Event-Handler auf DOM0-Ebene

Die traditionelle Art, einen Event-Handler über Javascript anzugeben, besteht darin, eine Funktion zuzuweisen Geben Sie ein Event-Handler-Attribut an. Jedes Element hat seine eigenen Event-Handler-Attribute, die normalerweise alle in Kleinbuchstaben geschrieben sind, wie zum Beispiel onclick. Indem Sie den Wert dieser Eigenschaft auf eine Funktion festlegen, können Sie einen Ereignishandler angeben.

var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
  alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;

Vorteile: 1. Einfach 2. Browserübergreifende Vorteile

Nachteile: Event-Handler werden nicht angegeben, bevor der Code ausgeführt wird, daher befinden sich diese Codes hinter der Schaltfläche auf der Seite, und es besteht die Möglichkeit Dass es keine Reaktion gibt, egal wie Sie über einen bestimmten Zeitraum klicken, und die Benutzererfahrung wird schlechter.

DOM2-Level-Event-Handler

definiert zwei Methoden zur Handhabung der Vorgänge zum Angeben und Entfernen von Event-Handlern: addEventListener() und removeEventListener(). Drei Parameter: 1. Der Name des zu verarbeitenden Ereignisses. 2. Eine Funktion als Event-Handler 3. Ein boolescher Wert. Der letzte boolesche Wert ist wahr, was bedeutet, dass der Ereignishandler während der Erfassungsphase aufgerufen wird, und falsch, was bedeutet, dass der Ereignishandler während der Bubbling-Phase aufgerufen wird.

// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
  alert('Hello World');
},false);

// 移除事件处理程序
btn.removeEventListener('click',function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener('click',handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener('click',handler,false);// 移除成功

Diese beiden Event-Handler werden in der Reihenfolge ausgelöst, in der sie hinzugefügt werden. In den meisten Fällen werden Ereignishandler zur Bubbling-Phase des Ereignisflusses hinzugefügt, um die Kompatibilität mit verschiedenen Browserversionen zu maximieren.

Vorteile: Einem Element können mehrere Event-Handler hinzugefügt werden.

Nachteile: IE8- und niedrigere Browser unterstützen keine Event-Handler auf DOM2-Ebene. (Einschließlich IE8)

IE-Ereignishandler

definiert zwei Methoden, ähnlich den oben genannten: attachmentEvent(), detachEvent(). Beide Methoden erhalten die gleichen zwei Parameter: Event-Handler-Name und Event-Handler-Funktion. Da IE8 und frühere Browser nur das Event-Bubbling unterstützen, werden über detachEvent() hinzugefügte Event-Handler zur Bubbling-Phase hinzugefügt.

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
  alert( this );// window
});
btn.attachEvent('onclick', funciton(){
  alert("HELLO, WORLD");
});

Wenn auf die Schaltfläche geklickt wird, ist die Auslösereihenfolge dieser beiden Event-Handler genau umgekehrt wie oben. Anstatt die Event-Handler in der Reihenfolge auszulösen, in der sie hinzugefügt wurden, ist das Gegenteil der Fall.

Vorteile: Mehrere Event-Handler können zu einem Element hinzugefügt werden

Nachteile: Unterstützt nur IE.

Browserübergreifender Ereignishandler

z. B.:

var EventUtil = {
  addHandler : function ( ele, type, handler ) {
    if ( ele.addEventListener ) {
      ele.addEventListener( type, handler, false );
    } else if ( ele.attachEvent ) {
      ele.attachEvent( 'on' + type, handler );
    } else {
      ele['on' + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( 'on' + type, handler );
    } else {
      ele[ 'on' + type ] = null;
    }
  }
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

Grundlegende JavaScript-Tipps (Bild- und Text-Tutorials, detaillierte Antworten für Sie)

Durchlaufen der Werte in der EL-Ausdruckslistensammlung in Javascript

Detaillierte Analyse und Analyse des JavaScript-Funktionsprinzips

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Ereignisflusses und der Ereignishandler in JavaScript (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!