ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す

はじめに

前回のDOM操作系に続き、AngularJSリファレンスを参考にイベント係のサンプルを一通り作ってみた。詳しい説明はAngularJSリファレンスをどうぞ。サンプルはcodepen.ioで作ったのでまとめて見たい方はこちら。

ngClick : 2-2-1

ngClickはクリックイベントをリスナーに登録します。

API Reference: ngClick

ngDblclick : 2-2-2

ngDblclickイベントはダブルクリックイベントをリスナーに登録します。

API Reference: ngDblclick

ngMousedown / ngMouseup : 2-2-3,4

ngMousedownはマウスダウン（押下）時、ngMouseupはマウスアップ（押上）時にそれぞれのイベントをリスナーに登録します。

• API Reference: ngMousedown
• API Reference: ngMouseup

ngMousesenter / ngMouseover / ngMouseleave : 2-2-5,6,8

ngMouseenter / ngMouseoverは要素にマウスオーバーした際のイベントをリスナーに登録します。 ngMouseleaveは逆に要素から離れた時のイベントです。ngMouseenterとngMouseoverのイベント発火条件は同等のものですが、ngMouseenterはイベントのバブリング（DOMの親要素へのイベント伝達）が行われません（イベントバブリングについて：JavaScript初級者から中級者になろう）。

• API Reference: ngMouseenter
• API Reference: ngMouseover
• API Reference: ngMouseleave

ngMousemove : 2-2-7

ngMousemoveは要素上をマウスカーソルが移動している時のイベントをリスナーに登録します。

API Reference: ngMousemove

ngFocus / ngBlur : 2-2-9,10

ngFocusはインプット要素などの入力・選択系要素にフォーカスが当たった時のイベントをリスナーに登録します。ngBlurはフォーカスが外れたときのイベントです。

• API Reference: ngFocus
• API Reference: ngBlur

ngKeydown / ngKeyup : 2-2-10,11

ngKeydownはキーの押下時、ngKeyupはキーの押上時のイベントをリスナーに登録します。ngKeydownはキーを押下し続けると連続してイベントを発生させます。

• API Reference: ngKeydown
• API Reference: ngKeyup

ngKeypress : 2-2-12

ngKeypressはngKeydownに似ていますが挙動に違いがあります。ngKeypressはキーを押下し続けても1回しかイベントを発生させません。また、カーソルキーやalt, commandなどのキーイベントの取得も行えません。文字が入力されるキーのみが対象となっています。

API Reference: ngKeypress

ngChange : 2-2-14

ngChangeはインプット要素などのチェンジイベントをリスナーに登録します。イベントを正しく発火させるにはng-modelを定義しておく必要があります。

API Reference: ngChange

ngChecked

ngCheckedは値の評価がtrueであれば指定されているチェックボックスをチェック状態にします。Checkされた際にイベントが発火するものではありません。

API Reference: ngChecked

ngCopy / ngCut / ngPaste : 2-2-16,17,18

ngCopyはクリップボードにコピーされた時、ngCutは切り取られた時、ngPasteはペーストされた時のイベントをリスナーに登録します。

• API Reference: ngCopy
• API Reference: ngCut
• API Reference: ngPaste

ngSubmit : 2-2-19

ngSubmitはフォームのSubmitイベントをリスナーに登録します。

API Reference: ngSubmit

イベントオブジェクト（$event）やバブリングの抑止についてはAngularJSリファレンスかAPI Reference: $eventを参照してください。

以上、イベント系ディレクティブのサンプル紹介でした。

シリーズ

1. AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
2. ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
3. ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
4. ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境
5. ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え
6. ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
7. ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
8. ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
9. ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す
10. ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
11. ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
12. ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策
13. ウェブデザイナーがはじめるAngularJS：コントローラ間の連携
14. ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap