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:

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;

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);// 移除成功

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

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

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

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:

Durchlaufen der Werte in der EL-Ausdruckslistensammlung in Javascript

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!