Triggers

The events on: can listen for: click(), change(), input(), pointerenter(), pointerleave(), focus() and blur(), plus key() and outside().

Syntax

on: click(<action>#), focus(<action>#), …;

registry syntax: click(action, ...)

Parameters

click() change() input()eventbubbling

Run on the target and its ancestors, innermost first.

pointerenter() pointerleave() focus() blur()eventtarget only

Run on the target element only.

Effect

Each trigger runs its actions when the event fires.

Example

.tabs {  --active: state(1);}.tab:on(click) {  --active: set(sibling-index());}.panel {  display: none;}.panel:nth-var(--active) {  display: block;}.tab:nth-var(--active) {  border-color: currentColor;}

Behavior

• 0.9. Each trigger becomes an :on() rule: .tab:on(click) { --active: set(sibling-index()); }. :on() accepts 32 events, among them dblclick, pointerdown, keyup, submit and scroll. These on: triggers keep working in 0.9.
• Keyboard activation of a <button> fires click, so buttons work with Enter and Space.
• Label clicks, Space and mouse clicks all fire change on checkboxes.

Supported contexts

• Inside on:.

Limitations

• Only these events are supported by on:. The on() value function accepts a longer list.

Related