iTV.js Framework {{itv.version}} : Event - Propagation
Level 1
Level 2
Button 1
Button 2
- Press navigational keys "up", "down", "left", "right" and "enter".
- Touch or click elements.
- When finished, press "back" to go back to the demo list.
Expected result:
- A log appears on the left with the corresponding "element id:event" couple displayed.
- Navigational keys "up" and "down" changes the currently focused element.
- Navigational keys "left" and "right" don't do anything.
- Touching or clicking an element produces the same effect as setting focus to, then, pressing the "enter" key on it.
- When focused on Level 1, Level 2 or Button 2 the "enter" key event bubbles up to the <body> element whereas on Button 1, the "enter" key event is handled by the element itself.
- The focus and blur events do not bubble up on Button 2 even though they are not handled on that element.
Remark:
- "this" refers to the element receiving the event.
- Please view the source of this HTML document to check out the code that makes it work the way it does.
Warning:
- If itv-event-down hadn't been defined on Button 2, the event would have bubbled up to Level 2 which would have set the focus to Button 1. To prevent this, we must declare itv-event-down even if we leave it blank in order to stop the propagation.