Events¶

A way to bind events.

Syntax¶

<div al-on.eventname.modifier="expression"> </div>
<div @eventname.modifier="expression"> </div>

Modifiers for keydown, keypress, keyup¶

Filter by extra key: alt, ctrl (control), meta, shift
Filter by keycode: enter, tab, delete, backspace, esc, space, up, down, left, right, <any number of key code>

Special modifiers for all events¶

stop - calls stopPropagation
prevent - calls preventDefault
nostop - voids stopPropagation for click, dblclick, submit
noprevent - voids preventDefault for click, dblclick, submit
noscan - voids $scan
throttle-<number>
debounce-<number>

Modificators “prevent” and “stop” are on by default for click, dblclick and submit. Available arguments in expressions: $event, $element, $value

Examples¶

al-on.keyup=”onKeyup($event)”
al-on.keydown.tab=”onTab()”
@keyup=”onKeyup($event)”
@keyup=”key=$event.keyCode”
@keydown.tab=”onTab()”
@keydown.enter=”onEnter($event)”
@keydown.13=”onEnter($event)”
@keydown.13.prevent=”onEnter($event)”
@keydown.control.enter=”onEnter($event)”
@keydown.control.shift.enter=”onEnter($event)”
@input=”value=$event.target.value”
@submit=”onSubmit()”
@submit.noprevent=”onSubmit()”
@click=”onClick($event)”
@click.noprevent=”onClick()”
@click.noprevent.stop=”onClick()”
@mousemove.noscan=”onMousemove($event)”
@mousemove.throttle-300=”onMousemove($event)”
@mousemove.debounce-300=”onMousemove($event)”

You can make aliases and filters for events¶

It lets you:

bind a few events to one expression
makes custom modifiers (filters)
make aliases for events

A few ways to make aliases¶

 alight.hooks.eventModifier['enter'] = 'keydown blur';
 alight.hooks.eventModifier['enter'] = ['keydown', 'blur'];
 alight.hooks.eventModifier['enter'] = (event, env) => {}
 alight.hooks.eventModifier['enter'] = {
   event: 'keydown blur',        // can be omitted
   fn: (event, env) => {}        // can be omitted
   init: (scope, element) => {}  // can be omitted
 }
 alight.hooks.eventModifier.enter = {
   event: ['keydown', 'blur'],
   fn: (event, env) => {
     env.stop = true;  // stop the event
   }
 }