Events

VSN.js supports events in two ways: inline vsn-on:* attributes and on blocks inside behaviors.

vsn-on (inline)

<button class="card" vsn-on:click="count += 1;"></button>

This is handy for quick one‑offs, but behaviors are better for structure.

on blocks

behavior .card {
  count: 0;

  on click() {
    count += 1;
  }
}

Event access

Use event arguments if you need the event:

behavior .card {
  on click(event) {
    console.log(event.type);
  }
}

Key modifiers

<input class="name" />

behavior .name {
  on keyup.enter() { submit(); }
  on keydown.shift.enter() { submit(); }
}

Event modifiers

Use modifiers like .prevent, .stop, .once, .outside:

behavior .dialog {
  on click.outside.prevent() { open = false; }
}