molily: Event Flow im DOM Level 2 Event Model

Beitrag lesen

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