Events

Events are on all elements and allow you to trigger something when an event occurs for the element.

The returned e is the element, meaning you can chain methods to this element that will be triggered when the event fires.

Element()
    .onClick( (e) => e
        .rotate()
    )

Interaction Events

• onLoad( (c) => c )
• onClick( (c) => c )
• onChange( (c) => c )
• onHover( (c) => c, (c) => c ) - Callbacks for the mouse entering and leaving
• onFocus( (c) => c )
• onBlur( (c) => c )
• onDoubleClick( (c) => c )
• onError( (c) => c )
• onKeypress( (c) => c ) - Meant for use with the TextInput(), TextBox(), etc.

Screen Size Events

These events are triggered by screen size changes using standard screen size ratios.

• onDeviceSmall( (c) => c )
• onDeviceMedium( (c) => c )
• onDeviceLarge( (c) => c )

State Selectors

You can apply effects like :hover, :active, and :focus using the helper methods. This can be chained along with methods that define the initial style.

jsUI.globalStyle('input, textarea')
    .border('gray','2px')
    .hover((e) => e
        .borderColor('darkgray)
    )
    .rounded('5px');