Events Drive Behaviour

In staci, you can create an event using staci.event("eventName", callback). Events can then be registered to elements using the st-event-type="eventName" syntax.

Creating an Event

Here, we establish a signal and create an event to increment the signal:

1<script>
2  staci.set("count", 0);
3  staci.event("incrementCount", () => {
4    let [count, setCount] = staci.get("count");
5    setCount(count+1);
6  });
7</script>

Registering an Event

Once an event has been created, you can register it like so:

1<button st-click="incrementCount">Click Me!</button>

Multiple Events

Multiple events can be registered by using a semicolor ; as a seperator:

1<button st-click="incrementCount;anotherEvent">Click Me!</button>

Available Events

Here is an array of available st- event associations:

 1this.eventPairs = [
 2    ["st-click", "click"],
 3    ["st-dblclick", "dblclick"],
 4    ["st-mouseup", "mouseup"],
 5    ["st-mousedown", "mousedown"],
 6    ["st-mousemove", "mousemove"],
 7    ["st-mouseenter", "mouseenter"],
 8    ["st-mouseleave", "mouseleave"],
 9    ["st-keydown", "keydown"],
10    ["st-keypress", "keypress"],
11    ["st-keyup", "keyup"],
12    ["st-focus", "focus"],
13    ["st-blur", "blur"],
14    ["st-submit", "submit"],
15    ["st-change", "change"],
16    ["st-input", "input"],
17    ["st-focusin", "focusin"],
18    ["st-focusout", "focusout"],
19    ["st-select", "select"],
20    ["st-resize", "resize"],
21    ["st-scroll", "scroll"],
22    ["st-wheel", "wheel"],
23    ["st-touchstart", "touchstart"],
24    ["st-touchend", "touchend"],
25    ["st-touchmove", "touchmove"],
26    ["st-touchcancel", "touchcancel"],
27    ["st-pointerdown", "pointerdown"],
28    ["st-pointerup", "pointerup"],
29    ["st-pointermove", "pointermove"],
30    ["st-pointerenter", "pointerenter"],
31    ["st-pointerleave", "pointerleave"],
32    ["st-pointercancel", "pointercancel"],
33    ["st-contextmenu", "contextmenu"],
34    ["st-wheel", "wheel"],
35    ["st-drag", "drag"],
36    ["st-dragstart", "dragstart"],
37    ["st-dragend", "dragend"],
38    ["st-dragover", "dragover"],
39    ["st-dragenter", "dragenter"],
40    ["st-dragleave", "dragleave"],
41    ["st-drop", "drop"],
42    ["st-input", "input"],
43    ["st-keydown", "keydown"],
44    ["st-keyup", "keyup"],
45];