DOM Events - propagation

Consider the folowing DOM Document:

  • root
    • a
    • b
    • c
      • e
      • f
        • h
        • i
      • g
    • d

There are 2 ways an event is propagated:
  1. Element to parent
    • $ el->trigger("someEvent", array("optional","data"))
    • $el->trigger("someEvent", array("optional","data"), Xms\Core\XmsEvent::BUBBLE_PARENT)
    • $el->trigger("someEvent", array("optional","data"), Xms\Core\XmsEvent::BUBBLE_DEFAULT)
  2. Element to childs
    • $el->trigger("someEvent", array("optional","data"), Xms\Core\XmsEvent::BUBBLE_CHILDS)

Additionally, to stop an event propagating once it has be intercepted somewhere you have to use $evt -> stopPropagation(); if an event is meant to be intercepted by one DOMElement only, it makes sense to trigger that event with Xms\Core\XmsEvent::BUBBLE_CANCEL which so it won't propagate in DOM at all

For the example document above, h and c elements respond to someEvent; if we trigger someEvent on f with default bubbling type, it will go to c; if we use BUBBLE_CHILDS the event is beign intercepted by h.
If we bind f to someOtherEvent and trigger it on f directly, it won't be propagated anywhere if:
  • is triggered with Xms\Core\XmsEvent::BUBBLE_CANCEL or
  • inside the event callback we use $evt -> stopPropagation()

Showing 5 from 0 out of

Xms\Core\XmsEvent implementation is diferent than W3C standard in the way that $evt->target is the DOMElement the event was triggered initially and $evt->currentTarget is the current DOMElement; I designed it this way to keep it simple for everyone so instead of w3c bubbling, capture and target phases, I call bubbling any way the event is propagated but provide the same functionality.

To explain the way I implemented target and currentTarget let's go back to the DOM document used as example in my previous post, and trigger someEvent on (with default BUBBLE_PARENT) and intercepted on c:
  • h
    • target = h
    • currentTarget = h
  • c
    • target = h
    • currentTarget = c
Showing 5 from 0 out of