Beispiel für JavaScript-Ereignismodellanalyse_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben die Verwendung des JavaScript-Ereignismodells. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Veranstaltungsmodell

Bubbling-Ereignisse: Ereignisse werden von Blattknoten entlang der Vorgängerknoten zum Wurzelknoten weitergegeben
Erfassen von Ereignissen: vom obersten Element des DOM-Baums bis zum genauesten Element, im Gegensatz zu sprudelnden Ereignissen
DOM-Standard-Ereignismodell: Der DOM-Standard unterstützt sowohl Bubbling-Ereignisse als auch Capture-Ereignisse. Man kann sagen, dass es sich um eine Kombination aus beiden handelt: Zuerst den Capture-Typ und dann die Bubbling-Lieferung

2. Ereignisobjekt

Im IE-Browser ist das Ereignisobjekt ein Attribut des Fensters. Im DOM-Standard muss das Ereignis als einziger Parameter an die Ereignisverarbeitungsfunktion

übergeben werden

Kompatibles Ereignisobjekt abrufen:

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
} 

Im IE ist das Objekt des Ereignisses im srcElement des Ereignisses enthalten, während im DOM-Standard das Objekt im Zielattribut

enthalten ist Rufen Sie das Element ab, auf das das kompatible Ereignisobjekt zeigt:

var target =event.srcElement ? event.srcElement : event.target ;

Die Voraussetzung besteht darin, sicherzustellen, dass das Ereignisobjekt korrekt abgerufen wurde

3. Ereignis-Listener

Unter IE werden registrierte Listener in umgekehrter Reihenfolge ausgeführt, d. h. die später registrierten werden zuerst ausgeführt

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

Der erste Parameter ist der Ereignisname und der zweite Parameter ist die Callback-Handler-Funktion

Unter DOM-Standard:

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)

Der erste Parameter ist der Ereignisname ohne das Präfix „on“, der zweite Parameter ist die Rückrufverarbeitungsfunktion und der dritte Parameter gibt an, ob die Rückruffunktion in der Erfassungsphase oder der Bubbling-Phase aufgerufen wird. Der Standardwert ist „true“. in der Erfassungsphase

4. Veranstaltungszustellung

Kompatible Browser-Ereigniszustellung abbrechen

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

Standardverarbeitung nach Abbruch der Ereigniszustellung

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.