event()

Inside a mutation of an :on() rule: one field of the current event, such as event(local-x), event(key) or event(value), read once as a typed value.

Syntax

--<state>: set(event(<field>));

registry syntax: event(field)

Parameters

fieldone of 32 field names (see Behavior)required

Checked at compile time against the rule’s trigger. A field that the trigger does not provide is a compile error that lists the fields it does provide.

Return value

A typed value: px lengths for coordinates and distances, numbers, booleans or strings. A field with no value for this event, such as value-as-number of a field that holds no number, writes nothing.

Example

.pad {  --x: state(0px);  --y: state(0px);  --key: state("none");}/* A snapshot of where the press happened, relative to the pad. */.pad:on(pointerdown) {  --x: set(event(local-x));  --y: set(event(local-y));}/* Keyboard fields exist only for keyboard triggers. */.pad:on(keydown) {  --key: set(event(key));}.pad .dot { translate: var(--x) var(--y); }.pad .x { content: var(--x); }.pad .y { content: var(--y); }.pad .k { content: var(--key); }

Correct and incorrect usage

.pad { --x: state(0px); --y: state(0px); }.pad:on(pointerdown) {  --x: set(event(local-x));  --y: set(event(local-y));}.pad .dot { translate: var(--x) var(--y); }

.search { --q: state(""); }.search input:on(input) { --q: set(event(value)); }.search .echo { content: var(--q); }

.pad { --key: state(""); }.pad:on(click) { --key: set(event(key)); }

Behavior

• Release status. The 0.9.0 release recommendation (hardening report, section H) lists the pointer, keyboard and form fields as stable, so this page does not mark event() experimental. The drag fields stay experimental. The runtime’s describe() still reports the whole function as experimental.
• A snapshot, not a JavaScript `Event`. event() copies one value when the event fires. There is no property access, no target or currentTarget, and no script.
• General, every trigger: type, the DOM event type (drag for drag phases). .log:on(click) { --last: set(event(type)); }
• Pointer, for click, contextmenu, the pointer* events, the mouse* events and dblclick: client-x and client-y (viewport), page-x and page-y (document), local-x and local-y (from the border box of the element the rule matched), button, buttons, alt-key, ctrl-key, shift-key and meta-key. click, contextmenu and the pointer* events also give pointer-id, pressure and pointer-type (mouse, pen or touch); the mouse* events and dblclick do not. .pad:on(pointerdown) { --x: set(event(local-x)); }
• Keyboard, for keydown and keyup: key, code, repeat and the four modifier keys. .pad:on(keydown) { --key: set(event(key)); }
• Form, for input and change: value (a string), value-as-number and checked, read from event.target, which must be an input, select or textarea. Password, one-time-code and payment fields give "". .signup input:on(input) { --greeting: set(event(value)); }
• Drag (experimental), for :on(drag) and its phases, in addition to the pointer fields: x and y (the mutated state at drag start plus the distance moved), delta-x and delta-y (total distance since the start), movement-x and movement-y (since the previous drag event), and start-x and start-y (viewport coordinates of the press). .card:on(drag) { --x: set(event(x)); }
• Scroll, for scroll and scrollend: scroll-top and scroll-left of the element the rule matched. .feed:on(scroll) { --top: set(event(scroll-top)); }
• Focus, submit, reset, toggle, animation and transition triggers provide only type. outside(…) provides the fields of its event.
• Compared with other functions. Outside mutations, mouse(x) is a live value that follows the pointer; inside a mutation it is the event’s client coordinate, and mouse(x, local) is event(local-x). element(width) in a mutation is the border-box width of the element the rule matched, at the event, and attr(data-id) reads that element’s attribute at the event. Keys, form values and drag distances exist only through event().

Supported contexts

• Only inside set(), increment() and decrement() of a mutation in an :on() rule. Elsewhere there is no event: Reactive CSS does not evaluate event(), and the browser ignores the declaration as invalid.
• Combines with the typed math of mutations: set(clamp(0px, event(x), 200px)), set(round(event(local-x), 10px)).

Limitations

• Only the fields listed here. target, currentTarget, detail and other event properties are not exposed.
• value and checked read the control the event happened on. A bubbling :on(input) rule on an ancestor reads whichever field changed.
• Coordinates are px. They need a pointer or drag trigger; mouse() in a mutation has the same rule.

Examples

• Click coordinates · API examples, runs the real runtime
• Draggable card · API examples, runs the real runtime
• Form mirror · API examples, runs the real runtime

Related