События в Angular Light

Angular Light ^[1] — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js.

В Angular Light есть директивы обработки событий: al-click, al-dblclick, al-submit, al-blur, al-change, al-focus, al-keydown, al-mousedown, al-mouseenter и т.д. Как видите под каждое отдельное событие создается отдельная директива, а если директивы нет под какое-то событие, то приходилось делать директиву вручную и это не эффективно. Поэтому было принято решение сделать возможность обрабатывать любые события одним способом. Рассматривались разные варианты (например al-on="keypress=onClick($event,$element), mousedown=onMouseMove()"), в итоге остановились на варианте, который используется (или похож) в других фреймворках.

Примеры:

<div al-on.click="onClick()"></div>  <!-- При клике вызывается ф-ия onClick() -->
<div al-on.mousemove="x=$event.X"></div> <!-- При движении мыши координата X записывается в переменную x -->
<input al-on.keydown="onKey()" />

И сокращенный вариант:

<div @click="onClick()"></div>
<div @mousemove="x=$event.X"></div>
<input @keydown="onKey()" />

Так же можно использовать модификторы, которыми можно фильтровать события, делать альясы или менять их поведение, пример:

<input @keydown.enter="onEnter()" />  <!-- Функция onEnter() вызывается если произошло событие keydown с кодом 13 (enter), т.е. нажата клавиша Enter -->
<input @keydown.13="onEnter()" />  <!-- Если указать число то будет фильтрация по keyCode, в данном случае это "Enter" -->
<input @keydown.ctrl.enter="onCtrlEnter()" />  <!-- Ф-ия вызывается при нажатии ctrl + enter -->
<input @keydown.left="onLeft()" />  <!-- ф-ия вызывается при нажатии клавишы left -->

Для событий keydown, keypress, keyup доступны такие модификаторы: enter, tab, delete, backspace, esc, space, up, down, left, right либо можно указать любой код числом. И доп. клавиши: alt, ctrl (или control), shift, meta. В итоге можно сделать такой пример ^[2] без дополнительного js.

Для всех событий доступны модификаторы: stop (вызывает stopPropagation), prevent (вызывает preventDefault), noscan (отменяет вызов $scan для события).

throttle и debounce

Также среди модификаторов есть throttle и debounce, теперь любое событие можно сделать «отложенным», примеры:

<input @keydown.throttle-300="onKeyDown()" />
<div @mounemove.debounce-100="onMove()"></div>

Пример на jsfiddle ^[3]

Т.к. для события используется отдельный атрибут, то это позволяет подписываться на одно и тоже событие несколько раз, за счет этого можно получить разные эффекты:

<div @mouseenter="t=1" @mouseenter.throttle-500="t*=2" />

Пример на jsfiddle ^[4]

Пользовательские модификаторы

Если стандартных модификаторов не хватает, то можно сделать свои. Пример модификатора который выполняет роль алиаса событий, т.е. объединяет события keydown и blur в один myevent:

alight.hooks.eventModifier.myevent = 'keydown blur';

Использование:

<input @myevent="onMyEvent()" />

Пример модификатора как фильтр, которое срабатывает при нажатии Enter:

alight.hooks.eventModifier.enter = {
  event: 'keydown',  // Фильтр будет работать для события keydown
  fn: function(event, env) {
    env.stop = event.keyCode != 13;  // блокируем событие если нажат не Enter
  }
}

Такой модификатор можно использовать как фильтр — пример ^[5], либо как псевдо событие — пример ^[6].

Кроме того можно интегрировать любые дополнительные библиотеки, например библиотека touch событий Hammer.js, события tap и pan, пример ^[7].

Ссылка ^[8] на документацию.

Так же появились универсальная обработка атрибутов, шаблонов, бета версия компонент и роутера в стиле reactjs, и ещё много разных мелочей, но это в следующих статьях.

Автор: lega

Источник ^[9]