Event Phasen
Ein Event durchläuft mehrere Phasen:
- Capturing Phasen hier steigt das Ereignis vom obersten Knoten des Dom Baums zum Element welches das Ereignis ausgelöst hat
- Target Phase Hier wird das Ereignis am Zielelement ausgelöst
- Bubbling Phase Hier steigt das Ereignis wieder zurück zum obersten Knoten des Dom Baums.
Sowohl beim Capturing als auch beim Bubbling löst das Event die Event Handler bzw Event-Listener im DOM der Reihe nach aus. Siehe dazu den Quellcode des folgenden Beispiels. und probiere es im Developer aus (F12) und beobachte die Konsole.
Klickt man auf ein Rechteck, sieht man wie die Elternelemente der Reihe nach das Ereignis auslösen und zwar in der Bubbling Phase. Das Ereignis wird auf dem angeklickten Element ausgelöst und danach auf dem jeweiligen Elternelement. Es steigt im DOM zurück nach oben.
Beim nächsten Beispiel phase2.html wurde lediglich im Event Listener ein dritter Parameter eingegeben und zwar, true. Dadurch werden die Ereignisse in der Capturing Phase ausgeführt, also genau in umgekehrter Reihenfolge. Das Ergebnis sieht im Browser zwar genauso aus aber in der Konsole Ausgabe sieht man die umgekehrte Reihenfolge. Lässt man den dritten Parameter weg, wie im vorigen Beispiel steht der dritte Parameter auf false für die Bubbling Phase.
stopPropargation()
Mittels stopPropargation() wird der Ereignisfluss unterbrochen. Siehe dieses Beispiel (bubbling Phase). Das heißt wenn das Ereignis noch an weiteren Elementen angebunden ist, werden diese nicht ausgeführt.
Werden die Ereignisse in der Capturing Phase ausgeführt, indem man den dritten Parameter auf true setzt, sieht das Ergebnis anders aus, da die Ereignisse vom Dokumentknoten ausgehen und dann nicht weitergereicht werden. siehe dieses Beispiel
stopImmediatePropargation()
Mit stopPropargation werden nur die Events unterbrochen, bei denen das Ereignis an anderen Elementen registriert ist. Möchte man verhindern, dass andere Ereignisse am gleichen Element unterbrochen werden, wählt man stopImmediatePropargation()
preventDefault()
Mittels preventDefault() kann man das Standarverhalten eines Events unterdrücken. Beispielsweise würde ein Link nicht aufgerufen oder ein Formular nicht abgeschickt.
Erklärung:
Im Script wurde eine Funktion namens touch mit einem Parameter hinweis.
Die Funktion wird mit 2 Event Handler aufgerufen und bekommt so bei onMouseOver einen Text und bei onMouseOut einen leeren String zugewiesen.
Javascript Event Handler
Das gleiche Beispiel mit einem Javascript Event Handler könnte so aussehen. Siehe dazu auch das Thema Callback Funktion
<script>
document.getElementById("area").onmouseover = function(){
hinweis("Mausberührung erfolgt");
}
document.getElementById("area").onmouseout = function(){
hinweis("");
}
</script>
