Angular Lightには、イベント処理ディレクティブがあります ： al-click、al-dblclick、al-submit、al-blur、al-change、al-focus、al-keydown、al-mousedown、al-mouseenterなど ご覧のとおり、イベントごとに個別のディレクティブが作成されます。イベントにディレクティブがない場合は、手動でディレクティブを実行する必要があり、これは効果的ではありません。 したがって、イベントを1つの方法で処理できるようにすることが決定されました。 さまざまなオプションが考慮されました（たとえば、
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 -->
次の修飾子は、キーダウン、キープレス、キーアップイベントに使用できます。enter、 tab、delete、backspace、esc、space、up、down、left、right、または数字で任意のコードを指定できます。 そして追加します。 キー： alt、ctrl （またはcontrol ）、 shift、meta 。 その結果、追加のjsなしでこのような例を作成できます。
修飾子はすべてのイベントで使用可能です： 停止 （stopPropagationを呼び出し）、 防止 （preventDefaultを呼び出し）、 noscan （イベントの$ scan呼び出しをキャンセル）。
スロットルとデバウンス
また、モディファイアーには、 throttleとdebounceがあります。現在、どのイベントも「遅延」させることができます。
<input @keydown.throttle-300="onKeyDown()" /> <div @mounemove.debounce-100="onMove()"></div>
Jsfiddleの例
なぜなら イベントには個別の属性が使用されます。これにより、同じイベントを複数回サブスクライブできます。これにより、異なる効果を得ることができます。
<div @mouseenter="t=1" @mouseenter.throttle-500="t*=2" />
Jsfiddleの例
カスタム修飾子
標準の修飾子では不十分な場合は、独自の修飾子を作成できます。 イベントのエイリアスとして機能する修飾子の例、つまり keydownイベントとblurイベントを1つの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 } }
このような修飾子は、フィルターとして（ 例） 、または疑似イベントとして（ 例 ）使用できます。
さらに、 Hammer.jsイベントタッチライブラリ、 タップイベント、 パンイベントなど、追加のライブラリを統合できます。
ドキュメントへのリンク 。
また、属性、テンプレート、コンポーネントのベータ版、reactjsスタイルのルーター、その他多くの小さなもののユニバーサル処理が登場しましたが、これは以下の記事にあります。