Heim > Artikel > Web-Frontend > 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; }
enthalten ist
Rufen Sie das Element ab, auf das das kompatible Ereignisobjekt zeigt:
var target =event.srcElement ? event.srcElement : event.target ;
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) //移除监听器
Unter DOM-Standard:
element.addEventListener('click',observer,useCapture) element.removeEventListener('click',observer,useCapture)
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.