Event Flow im DOM Level 2 Event Model

[wahsaga]

hi,

ich habe eine Veständnisfrage zum Event Flow, wie er im DOM Level 2 Event Model definiert ist.

Event capture: "[Secondly,] event capture is not specified for a single EventTarget, it is specified for a specific type of event. Once specified, event capture intercepts all events of the specified type targeted toward any of the capturer's descendants."

Was genau bedeutet das, das es nicht für ein einzelnes Event-Target, sondern für einen Event-Typ festgelegt wird?
Ich registriere einen Eventhandler für ein bestimmtes Element mittels addEventListener und useCapture=true.
Wenn ich jetzt für ein Nachfahrenelement von diesem noch einen mit useCapture=false registriere, der also erst in der Bubbling-Phase gefeuert werden soll - wirkt sich jetzt die Registrierung des Events im Vorfahr in der Capture-Phase irgendwie darauf aus?

Event bubbling:
"Events which are designated as bubbling will initially proceed with the same event flow as non-bubbling events. The event is dispatched to its target EventTarget and any event listeners found there are triggered."

Was bedeutet any event hier?
Wird jeder Handler auf dem Element Target ausgeführt, egal ob mit useCapture true oder false registriert? Oder nur die mit false?

"Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward, checking for any event listeners registered on each successive EventTarget."

Gleiche Frage hier: Bedeutet "any" hier auch wieder alle, egal ob useCapture true oder false?

gruß,
wahsaga

[molily]

Hallo,

ich muss gestehen, dass ich diese Passagen nie bis zum Verständnis ausgedeutet habe. Die Spezifikation scheint mir supertriviale Dinge superverklausuliert zu formulieren. Ich gehe an sowas pragmatisch heran, ich hab mir dann immer mit meinem intuitiven, oberflächlichen Verständnis weitergeholfen, das hat bisher funktioniert. ;) DOM 3 Events hat da glaube ich im Detail aufgeräumt, der gegenwärtige Entwurf ist mir aber auch noch kryptisch.

ich habe eine Veständnisfrage zum Event Flow, wie er im DOM Level 2 Event Model definiert ist.

Event capture: "[Secondly,] event capture is not specified for a single EventTarget, it is specified for a specific type of event. Once specified, event capture intercepts all events of the specified type targeted toward any of the capturer's descendants."

Was genau bedeutet das, das es nicht für ein einzelnes Event-Target, sondern für einen Event-Typ festgelegt wird?

Ich verstehe das ganz grundsätzlich:
Beim Capturing sage ich erstmal: Fange bei document.body alle Events vom Typ x ab.
Ich sage nicht: Fange bei document.body alle Events gleich welchen Types ab, deren Ziel das Element mit der ID »blub« ist. So eine Logik kann ich natürlich zu programmieren versuchen, aber addEventListener bzw. das Capturing-Konzept von DOM Events alleine macht das nicht.

Ich registriere einen Eventhandler für ein bestimmtes Element mittels addEventListener und useCapture=true.
Wenn ich jetzt für ein Nachfahrenelement von diesem noch einen mit useCapture=false registriere, der also erst in der Bubbling-Phase gefeuert werden soll - wirkt sich jetzt die Registrierung des Events im Vorfahr in der Capture-Phase irgendwie darauf aus?

Äh... nein. Wüsste ich nicht.
(In der Capture-Phase kann der Event natürlich gecancelt werden, klar.)

Event bubbling:
"Events which are designated as bubbling will initially proceed with the same event flow as non-bubbling events. The event is dispatched to its target EventTarget and any event listeners found there are triggered."

Was bedeutet any event hier?

any event listeners = alle ›Ereignis-Überwacher‹

Sinngemäß: Das ›Ereignis‹ ist beim Zielelement gestartet und alle dortigen Ereignis-Überwacher werden ausgelöst.

Wird jeder Handler auf dem Element Target ausgeführt, egal ob mit useCapture true oder false registriert? Oder nur die mit false?

Sehr wichtige Frage!

Antwort mit DOM 3 Events: Nur die mit useCapture=false!

Wenn ich einem Element einen Handler für die Capturing-Phase registriere und das Element ist tatsächliches Ziel eines Events, darf der Handler (gemäß DOM 3 Events) *nicht* ausgeführt werden.

Testcase:
http://molily.de/temp/js-event-order.html

Alle Elemente bekommen dort Handler mit useCapture=true und useCapture=false; das letztliche Zielelement auch. Dessen Capture-Handler darf aber nicht ausgeführt werden. Es muss heißen:
...
element d1, capture phase
element target, target phase
element d1, bubbling phase
...

Jetzt sag nicht, »Firefox, Safari und Konqueror feuern aber auch den Handler mit useCapture=true!« - Ja, stimmt, aber die machen das alle falsch. Nur Opera machts richtig. :-)

Firefox-Bug dazu: https://bugzilla.mozilla.org/show_bug.cgi?id=235441

useCapture=true heißt also: Nur den Handler auslösen, wenn der Event in der Capture-Phase am Knoten vorbeikommt.
useCapture=false heißt also: Den Handler auslösen, wenn der Event in der Bubbling-Phase am Knoten vorbeikommt ODER der Event beim Knoten die Target-Phase durchmacht.

Ach, ich sehe gerade, in der offiziellen Definition steht das auch ;) :
»If true, useCapture indicates that the user wishes to add the event listener for the capture phase only, i.e. this event listener will not be triggered during the target and bubbling phases. If false, the event listener will only be triggered during the target and bubbling phases.«

"Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward, checking for any event listeners registered on each successive EventTarget."

Gleiche Frage hier: Bedeutet "any" hier auch wieder alle, egal ob useCapture true oder false?

In der Bubbling-Phase werden natürlich nur Listener gefeuert, die für diese Phase registriert wurden, das geht aber tatsächlich nicht aus dem zitierten Text hervor. Das wird in DOM 3 Events zumindest durch diese Definition festgelegt: http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-listeners-activation-h4

Mathias

[molily]

The event is dispatched
Das ›Ereignis‹ ist beim Zielelement gestartet

.. wird gestartet ...

Englische Sprache, schwere Sprache: Passiv ist nicht Perfekt, nur weil es auch mit »P« anfängt.

[wahsaga]

Hi Mathias,

Die Spezifikation scheint mir supertriviale Dinge superverklausuliert zu formulieren.

:-)

Ich verstehe das ganz grundsätzlich:
Beim Capturing sage ich erstmal: Fange bei document.body alle Events vom Typ x ab.
Ich sage nicht: Fange bei document.body alle Events gleich welchen Types ab, deren Ziel das Element mit der ID »blub« ist.

document.body hier vermutlich nur als Beispiel?
Denn abfangen muss ich ja nicht dort, sondern kann ich bei jedem Knoten, der in der DOM-Hierarchie einen Vorfahr des Elements, auf dem der Event (inital) stattfindet, darstellt.

Die Grafik unter http://www.mediaevent.de/javascript/event_listener.html, zweiter Abschnitt, stellt es mir recht simplifiziert und verständlich dar.
Der aufgetretene Event wird vom Wurzelelement (document) aus zum Kindknoten heruntergereicht, und auf diesem Weg wird geschaut, ob es "Observer" gibt, die eine Eventbehandlung mit useCapture=true haben.
Anschliessend geht's beim Bubbling dann vom EventTarget wieder in die andere Richtung rauf bis zur Wurzel.

OK, bis hier hin war's ja eigentlich auch vorher schon klar.
Nur einige Details waren mir halt in der Spezifikation zu unverständlich.

Wird jeder Handler auf dem Element Target ausgeführt, egal ob mit useCapture true oder false registriert? Oder nur die mit false?

Sehr wichtige Frage!

Antwort mit DOM 3 Events: Nur die mit useCapture=false!

Vielleicht hätte ich mir gleich DOM 3 Events anschauen sollen, anstatt Level 2 ...
Ich werd' da noch mal reinschauen, in wie fern mir dort die in Level 2 unklaren Stellen spezifischer erscheinen.

Dass Eventlistener, die einem Element während der Abarbeitung des Events auf eben diesem Element hinzugefügt werden, in der gleichen Phase nicht berücksichtigt werden dürfen, scheint ja dort zumindest schon mal gleich geblieben zu sein.

Wenn ich einem Element einen Handler für die Capturing-Phase registriere und das Element ist tatsächliches Ziel eines Events, darf der Handler (gemäß DOM 3 Events) *nicht* ausgeführt werden.

Danke, diese explizite Aussage fehlte mir zum Beispiel in der Level 2-Version.

Jetzt sag nicht, »Firefox, Safari und Konqueror feuern aber auch den Handler mit useCapture=true!« - Ja, stimmt, aber die machen das alle falsch. Nur Opera machts richtig. :-)
[...]
useCapture=true heißt also: Nur den Handler auslösen, wenn der Event in der Capture-Phase am Knoten vorbeikommt.
useCapture=false heißt also: Den Handler auslösen, wenn der Event in der Bubbling-Phase am Knoten vorbeikommt ODER der Event beim Knoten die Target-Phase durchmacht.

:-/
Na dann muss ich mir überlegen, was ich dem IE beibringe - "richtiges" Vorgehen nach Spezifikation, oder Orientierung an Gecko &. Co.

Ach, ich sehe gerade, in der offiziellen Definition steht das auch ;)

Vielleicht sollte ich das per Flag wählbar machen ... Orientierung an der Praxis (Gecko-Verhalten emulieren), oder an der Theorie.

gruß,
wahsaga