Back

Controller Demo

Instructions: The following demos show Controller's event delegation and a custom event plugins. By interacting with the demos, you are able to trigger delegated events. When an event happens, its box turns from red to green. See if you can figure each one out.

Basic Events

Perform various actions on the controls below and the window to trigger the basic events.






Window events: load resize scroll unload click focus blur
Mouse events: mouseover mousemove mousedown mouseup mouseout
Keyboard events: keydown keypress keyup
Action events focus blur submit contextmenu click select change checkbox change radio change

Drag Drop

Drag "Drag Me".

Drag Me
Drop Here
Drag events: dragstart dragging dragend
Drop events: dropadd dropover dropmove dropout dropped

Lasso

Click in the area below and drag the lasso over the selectables. For this feature, include the lasso plugin.

Select Me
Select Me
Lasso events: lassostart lassomove lassoend
Selectable events: selectadd selectover selectmove selectout selected

Hover and Enter

Hoverenter is only called when the mouse stops over an element. Mouseenter is useful for handling nested elements.

Stop and hover
Stop and hover
Text
A child
Another Child
Mouse Over Me
Hover events: hoverenter hoverleave
EnterLeave events: mouseenter mouseleave

Subscribe

Controllers can respond to open ajax events. The Publish button publishes a "topic.event" message.

Publish Subscribe events: subscriber wildcard
Back