Detaillierte Erläuterung des Ereignismodells

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des Ereignismodells geben. Was sind die Vorsichtsmaßnahmen für die Verwendung der detaillierten Erklärung des Ereignisses? Schauen Sie mal rein.

IEEventModell (keine Erfassung) (<=ie8)

1. attachEvent(event, function)
   detachEvent(event, function)
   Der erste Parameter ist on+'event';

2. TargetObjectevent.srcElement;

3. dies zeigt auf das Fenster;

4. event.cancelBubble = true // Hör auf zu sprudeln
   event.returnValue = false // Standardereignisse blockieren

Standard-DOM-Ereignismodell (Erfassung, Ziel, Blase) (>ie8)

1. addEventListener(event, function, useCapture)
   removeEventListener(event, function, useCapture)
   useCapture ist wahr, wird in der Erfassungsphase ausgeführt, von außen nach innen ausgelöst;
   useCapture ist falsch, während der Risikoblase Phasenausführung (Standard), ausgelöst von innen nach außen;

2. event.target und event.currentTarget
   target befinden sich in der Zielphase des Ereignisses flow (Zeigt auf das Objekt, das die Ereignisüberwachung auslöst);
   currentTarget (zeigt auf das Objekt, das die Ereignisüberwachung hinzufügt) in den Erfassungs-, Ziel- und Bubbling-Stufen
   Nur ​​wenn der Ereignisfluss in der Zielphase, die beiden Punkte sind gleich;
   In der Erfassungs- und Sprudelphase zeigt Ziel auf das angeklickte Objekt und aktuelles Ziel zeigt auf das Objekt der aktuellen Ereignisaktivität (normalerweise das übergeordnete Objekt).

3. dies zeigt auf das Ereignis-Listening-Objekt

4. event.stopPropagation() // Stop bubbling
   event.preventDefault() / / Verhindern Sie, dass das Standardereignis

5. event.stopImmediatePropagation() ausgeführt wird, und verhindern Sie, dass die verbleibenden Ereignisverarbeitungsfunktionen ausgeführt werden, und verhindern Sie, dass das Ereignis im DOM-Baum sprudelt akzeptiert keine Parameter ;

Benutzerdefiniertes Ereignis

var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
  log('The time is: ' + e.detail);
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

So verwenden Sie die Ereignisschleife

So implementieren Sie JavaScript Event Bubbling und Event Capture

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Ereignismodells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!