Events Examples

on / once / fire / emit

Move mouse over elements and interact with links and form elements, to see event chains happening, which will color affected elements in the DOM.

container

content

form



clicking this should color all element backgrounds up to the outer container

off / on / pause / resume

onSwipe / offSwipe

Bind and unbind swipe gestures on the colored element below, by using the buttons. Swipes should result in a message and background color changes, if working correctly.

onDomReady

There should be two badges visible here (after some seconds), one being shown on dom ready event firing, the other one being shown on checking dom ready again, after the event has already been fired.

dom ready via event dom ready after already fired

onPostMessage / offPostMessage / emitPostMessage

This example tests communication between the host window and three embedded iframe-windows via postmessage functions.
The chain event tests if we can cleanly establish a chain of back-and-forth events, targeting one frame after the other.
The second event tests security measures via accepted origins. In this case, the targets should randomly have an incompatible origin, resulting in declined events.