on()

Re-evaluates an expression each time an event fires on the element. The value function, not the :on() event rule.

Syntax

on(<event>, <expression>)

registry syntax: on(event, expression)

Parameters

eventclick, pointerdown, keyup, animationend, transitionend, toggle …required

From an allowlist of 21 DOM events.

expressionany valuerequired

Evaluated once when bound, then again on each event.

Return value

The value of the expression.

Example

.die {  --roll: on(click, random(1, 6, by 1));  counter-reset: n var(--roll);}.die::before {  content: counter(n);}.greet {  --word: on(click, pick("Hello", "Hi", "Hey"));}.greet::after {  content: var(--word);}

Behavior

• One listener per bound element.

Supported contexts

• Any value.

Limitations

• Listens on the element with the declaration only. To change state, use an :on() rule with mutations.

Related