JSS exposes two types of event properties: unary and binary. That basically means there are event properties that take one JSS command...

event-prop: "jss-command";

...and there are event properties that take two JSS commands:

event-prop: "jss-command | jss-command";

Unary JSS Commands

Currently, the unary commands are:

  • blur
  • change
  • click
  • dblclick
  • error
  • focus
  • keydown
  • keypress
  • keyup
  • load
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • resize
  • scroll
  • select
  • submit
  • unload

For more information about when these events properties are fired, check out the jQuery documentation, as JSS simply wraps these events.

Here is an example of a JSS unary event property:

$.jss.declare({

  ".box":
  {
    click: "set-css background green";
  }

});

This event property will change the colour of any element that has the "box" class when it is clicked.

Binary JSS Commands

There is currently only one binary JSS command: hover. Here is an example of hover in action:

$.jss.declare({

  ".box":
  {
    hover: "set-css background green | set-css background blue";
  }

});

In the above example, all elements with the "box" class will have a green background when the mouse is hovered over them, and a blue background when the mouse is unhovered (i.e. moved off the element).

The hover JSS command is equivalent to:

$.jss.declare({

  ".box":
  {
    mouseenter: "set-css background green",
    mouseleave: "set-css background blue"
  }

});