角度光のイベント

Angular Lightは、Angular.jsとKnockout.jsのアイデアに基づいて構築された、スタンドアロンのクライアントMV（C / VM）フレームワークであり、単純化されたAngular.jsのように見えます。



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スタイルのルーター、その他多くの小さなもののユニバーサル処理が登場しましたが、これは以下の記事にあります。