JavaScript/DOM/Event/stopImmediatePropagation
Der Aufruf der Methode stopImmediatePropagation der Schnittstelle Event des Document Object Models verhindert, dass weitere für diesen Ereignistyp registrierte Handlerfunktionen aufgerufen werden.
Syntax:
event.stopImmediatePropagation( )
Während die Methode stopPropagation lediglich dafür sorgt, dass keine für andere Objekte registrierten Handlerfunktionen mehr aufgerufen werden, das Ereignis also nicht weiter durch das DOM propagiert, verhindert die Methode stopImmediatePropagation zudem auch den Aufruf von solchen Eventhandlern, die für das selbe Objekt registriert wurden wie die Handlerfunktion, in welcher der Methodenaufruf notiert wurde.
var foo = function (e) {
e.stopImmediatePropagation( );
console.log('foo invoked');
};
var bar = function ( ) {
console.log('bar invoked');
};
document.body.addEventListener('click', foo);
document.body.addEventListener('click', bar);
Hier haben wir zunächst zwei Funktionen notiert mit den Bezeichnern foo und bar, welche bei ihrem Aufruf einen kurzen Text in die Konsole schreiben sollen, welcher ihren Aufruf bestätigt. Darüber hinaus haben wir für das Element body zwei Event-Listener für den Ereignistyp click registriert, wobei wir das body-Element über die gleichnamige Eigenschaft des Dokumentobjektes addressiert haben. Schließlich wird bei den beiden Aufrufen der Methode addEventListener jeweils eine Referenz auf die zuvor notierten Funktionen als Argument übergeben, sodass diese beim Eintritt des Ereignisses aufgerufen werden.
Würden wir nun durch einen Klick innerhalb von body dafür sorgen, dass das click-Event feuert, dann würde dies normalerweise dazu führen, dass beide Handlerfunktionen aufgerufen werden und demnach nacheinander die beiden Bestätigungen des Funktionsaufrufs in die Konsole geschrieben werden.
Dies geschieht an dieser Stelle nun jedoch nicht, da wir in der Funktion foo auf dem automatisch als Argument übergebenen Event-Objekt die Methode stopImmediatePropagation aufgerufen haben, wodurch die weitere Ausbreitung des Ereignisses auch auf demselben Objekt, hier also body, unterbunden wird. Da die Registrierung des Event-Listeners für die Rückruffunktion bar nach derjenigen für die Funktion foo erfolgt ist und die Event-Listener beim Eintritt des entsprechenden Ereignisses grundsätzlich in der Reihenfolge aufgerufen werden in der sie registriert wurden, wird hier also lediglich die Bestätigung des Aufrufs von foo in die Konsole geschrieben.
var condition = 0;
document.body.addEventListener('click', function (e) {
if (condition === 1) {
e.stopPropagation( );
} else if (condition === 2) {
e.stopImmediatePropagation( );
}
console.log('A');
});
document.body.addEventListener('click', function ( ) {
console.log('B');
});
document.documentElement.addEventListener('click', function ( ) {
console.log('C');
});
In diesem Beispiel wird zunächst eine Variable mit dem Bezeichner condition und dem Wert 0 definiert. Weiterhin werden drei Event-Listener für das Ereignis click registriert, deren Callback jeweils eine anonyme Funktion ist, wobei die ersten beiden Eventhandler analog zum ersten Beispiel für das body-Element registriert werden und der dritte für das html-Element, welches über die Eigenschaft mit dem Bezeichner documentElement des Dokumentobjektes referenziert wird. Jede Rückruffunktion enthält hier die Anweisung, einen String in die Konsole zu schreiben. Innerhalb der zuerst notierten Funktion ist darüber hinaus eine bedingte Anweisung enthalten, welche dafür sorgt, dass beim Funktionsaufruf je nach Wert der Variable condition entweder die Methode stopPropagation, die Methode stopImmediatePropagation oder aber keine der beiden Methoden aufgerufen wird.
Im obigen Beispiel wurde der Variable condition also der Wert 0 zugewiesen, sodass innerhalb der ersten für body registrierten Handlerfunktion keine der beiden Methoden aufgerufen wird und folgerichtig nacheinander A, B und C in die Konsole geschrieben wird. Dabei ist in diesem Zusammenhang zu beachten, dass der für das html-Element registrierte Eventhandler nicht deshalb zuletzt aufgerufen wird weil er nach den anderen beiden Eventhandlern registriert wurde, sondern weil das Ereignis click hier in seiner Bubbling-Phase abgefangen wird und daher zuerst das body-Element passiert, bevor es zu dessen Elternelement html gelangt. Hätten wir bei der Registrierung des Event-Listeners für das html-Element also ein drittes Argument mit dem Wert true übergeben, so wäre diese Rückruffunktion zuerst aufgerufen worden, da in diesem Fall das Event in seiner Capturing-Phase abgefangen würde und es die Elemente entsprechend in umgekehrter Reihenfolge passiert hätte.
Jedenfalls, würden wir nun der Variable condition den Wert 1 zuweisen und mithin dafür sorgen, dass innerhalb der zuerst notierten Funktion die Methode stopPropagation aufgerufen wird, dann würde für das Ereignis intern das stop propagation flag gesetzt, was dazu führen würde, dass nach dem Aufruf der zweiten für das Body-Element hinterlegten Handlerfunktion der Algorithmus terminiert und der für das Html-Element registrierte Event-Listener mithin nicht mehr erreicht würde, sodass hierbei lediglich A und B in dies Konsole geschrieben würden, nicht jedoch C.
Würden wir der Variable schließlich den Wert 2 zuweisen, so würde intern nicht nur das stop propagation flag, sondern zudem auch das stop immediate propagation flag des Events gesetzt werden, mit dem Ergebnis, dass von der zuerst registrierten Handlerfunktion abgesehen überhaupt keine anderen Funktionen mehr aufgerufen werden, weder der zweite für body registrierte Eventhandler noch die für das Element html hinterlegte Rückruffunktion, sodass infolgedessen lediglich A in die Konsole geschrieben würde.
