H-SMILE core. CSSS! (css-script) language.

DOM element events

CSSS! extends classic CSS by the following activation attributes that define event handlers:

hover-on!
code contained in this attribute is invoked when element is getting :hover state. In other words on MOUSE_ENTER event;
hover-off!
is fired MOUSE_LEAVE event;
active-on!
is fired when the element gets :active state (e.g. on MOUSE_DOWN).
is-on-icon() indicator function can be used in this event handler.
active-off!
is fired when the element looses :active state (e.g. on MOUSE_UP).
is-on-icon() indicator function can be used in this event handler.
focus-on!
is fired when the element gains input focus.
focus-off!
is fired when the element looses input focus.
key-on!
is fired when the element receives key-down event, key-code() function returns code of the key.
key-code() indicator function can be used to get value of key pressed. Use key code constants to define code of the key if needed.
Example: key-code() == 'RETURN' ? self.ok = true;
key-off!
is fired when the element receives key-up event. Use key-code() function to get code of the key pressed;
click!
is fired as a result of click events: BUTTON_CLICK, HYPERLINK_CLICK, etc. Note: that to be able to receive this event element shall have behavior: button , hyperlink or clickable assigned.
assigned!
this event is fired when the element gets this style. In other word when value of the assigned! attribute changes.
value-changed!
is fired when value of the [input] element is getting changed. E.g. EDIT_VALUE_CHANGED, BUTTON_STATE_CHANGED and SELECT_SELECTION_CHANGED are causing this event.
validate!
is not an event in common sense but rather a helper method for the behavior:form to do validations of input elements before submission.
timer!
is used for defining code that will run on timer event. Timers are created and destroyed by start-timer(ms) and stop-timer() methods.
animation-start!
is fired after element.start-animation() method is called.  
animation-end!
is fired when animation finished.  
animation-step!
fired on each animation step. This handler shall return integer - number of milliseconds - delay of the next step.  
size-changed!
fired after the element gets new size.