1. Ereignisfluss
Ereignisströme beschreiben die Reihenfolge, in der Ereignisse von der Seite empfangen werden. Aber der IE schlägt Blasenströme vor, während Netscape Communicator Capture -Ströme vorschlägt.
JavaScript -Ereignisstrom
2. Ereignisblase
Das Ereignis beginnt vom spezifischsten Element (dem Knoten mit der tiefsten Nisthierarchie) empfangen und verbreitet dann Schritt für Schritt nach oben auf weniger spezifische Knoten (Dokument). wie folgt:
Die Codekopie lautet wie folgt:
<html>
<kopf>
<title> Ereignis Bubbling </title>
</head>
<body>
<div id = "mydiv"> klicken Sie auf mich </div>
</body>
</html>
window.onload = function () {
var obj = document.getElementById ("test");
obj.onclick = function () {
alarm (this.tagname);
};
document.body.onclick = function () {
alarm (this.tagname);
};
document.documentElement.onclick = function () {
alarm (this.tagname);
};
document.onclick = function () {
Alert ("Dokument");
};
window.onclick = function () {
Alert ("Fenster");
}
};
Ereignisausbreitungsreihenfolge: Div-> Body-> Html-> Dokument
Beachten:
Alle modernen Browser unterstützen Bubble -Ereignisse, aber es gibt einige Unterschiede in der Implementierung. Ereignisblasen in IE5.5 und frühere Versionen springen direkt von Körper zu Dokument (es wird kein HTML ausgeführt). Firefox-, Chrom- und Safari -Blasenereignisse bis zum Fensterobjekt.
3. Stop -Ereignisblasen und Standard -Ereignisse abbrechen
A. Holen Sie sich das Ereignisobjekt
Die Codekopie lautet wie folgt:
Funktion getEvent (Ereignis) {
// window.event dh
// Event nicht ie
Rückkehrereignis || Fenster.Event;
}
B Funktion: Stop -Ereignisblasen
Die Codekopie lautet wie folgt:
Funktion stopbubble (e) {
// Wenn ein Ereignisobjekt bereitgestellt wird, ist dies ein Nicht-I-Browser
if (e && e.stoppropagation) {
// Daher unterstützt es die StopPropagation () -Methode von W3C
E.Stoppropagation ();
} anders {
// Ansonsten müssen wir den IE verwenden, um die Ereignisblase abzusagen
window.event.cancelBubble = true;
}
}
C. Blockieren Sie das Standardverhalten des Browsers
Die Codekopie lautet wie folgt:
Funktion stopdefault (e) {
// Standard -Browser -Aktion (W3C) blockieren
if (e && e.preventDefault) {
E.PreventDefault ();
} anders {
// So blockieren Sie die Standardaktion der Funktion in IE
window.event.returnValue = false;
}
false zurückgeben;
}