События в Angular Light
Angular Light — это самостоятельный клиентский 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()"), в итоге остановились на варианте, который используется (или похож) в других фреймворках.
Примеры:
И сокращенный вариант:
Так же можно использовать модификторы, которыми можно фильтровать события, делать альясы или менять их поведение, пример:
Для событий keydown, keypress, keyup доступны такие модификаторы: enter, tab, delete, backspace, esc, space, up, down, left, right либо можно указать любой код числом. И доп. клавиши: alt, ctrl (или control), shift, meta. В итоге можно сделать такой пример без дополнительного js.
Для всех событий доступны модификаторы: stop (вызывает stopPropagation), prevent (вызывает preventDefault), noscan (отменяет вызов $scan для события).
throttle и debounce
Также среди модификаторов есть throttle и debounce, теперь любое событие можно сделать «отложенным», примеры:
Пример на jsfiddle
Т.к. для события используется отдельный атрибут, то это позволяет подписываться на одно и тоже событие несколько раз, за счет этого можно получить разные эффекты:
Пример на jsfiddle
Пользовательские модификаторы
Если стандартных модификаторов не хватает, то можно сделать свои. Пример модификатора который выполняет роль алиаса событий, т.е. объединяет события keydown и blur в один myevent:
alight.hooks.eventModifier.myevent = 'keydown blur';
Использование:
Пример модификатора как фильтр, которое срабатывает при нажатии Enter:
alight.hooks.eventModifier.enter = {
event: 'keydown', // Фильтр будет работать для события keydown
fn: function(event, env) {
env.stop = event.keyCode != 13; // блокируем событие если нажат не Enter
}
}
Такой модификатор можно использовать как фильтр — пример, либо как псевдо событие — пример.
Кроме того можно интегрировать любые дополнительные библиотеки, например библиотека touch событий Hammer.js, события tap и pan, пример.
Ссылка на документацию.
Так же появились универсальная обработка атрибутов, шаблонов, бета версия компонент и роутера в стиле reactjs, и ещё много разных мелочей, но это в следующих статьях.
