対象読者
- jQueryなどを使っている開発者
- JavaScriptを使った複数人でのプロジェクトに参加している方
- JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
必要な環境
この記事では、AngularJSを使用し、Chrome（41.0）、IE11、Firefox（36.0）、Safari（8.0.3）の環境にて確認を行っています。
DOMイベントを扱うためのディレクティブ
AngularJSでは独自のディレクティブ（属性）を利用してDOM要素とイベントリスナーを関連づけていきます（表1）。従来のonclickなどHTML標準の属性では、動作しませんので注意してください。
| DOMイベント属性 | ディレクティブ | 意味 |
|---|---|---|
| onfocus | ng-focus | フォーカスが当たった時のイベント |
| onblur | ng-blur | フォーカスがはずれたときのイベント |
| onchange | ng-change | 要素の内容が変わったときのイベント |
| onclick | ng-click | クリックされた時のイベント |
| ondblclick | ng-dblclick | ダブルクリックされた時のイベント |
| onsubmit | ng-submit | フォームがサブミットされた時のイベント |
| oncopy | ng-copy | クリップボードにコピーされたときのイベント |
| oncut | ng-cut | クリップボードに切り取りによりコンテンツがコピーされたときのイベント |
| onpaste | ng-paste | クリップボードからコンテンツを貼り付けたときのイベント |
| onkeydown | ng-keydown | キーボードのキーがダウンしたときのイベント |
| onkeypress | ng-keypress | キーボードのキーが押されたときのイベント |
| onkeyup | ng-keyup | キーボードのキーがアップしたときのイベント |
| onmousedown | ng-mousedown | マウスのクリックでボタンがダウンした時のイベント |
| onmouseup | ng-mouseup | マウスのクリックでボタンがアップしたときのイベント |
| onmouseenter | ng-mouseenter | マウスのカーソルが指定した要素内に入ったときのイベント |
| onmouseleave | ng-mouseleave | マウスのカーソルが指定した要素から出たときのイベント |
| onmousemove | ng-mousemove | マウスのカーソルが移動したときのイベント |
| onmouseover | ng-mouseover | マウスのカーソルが指定した要素の上にある時のイベント |
同じ方法でほぼ利用できますので、mouse関連のイベントの利用例をリスト1に示します。
リスト1は青の短形にマウスが入った時や動いた時等にメッセージを表示するサンプルコードです。
リスト1 ngMouesXXXXの利用例 (ngmouse_xxx.htmlの抜粋)
<div ng-init="msg = ''"></div>
<div style="position:relative; width:100px; height: 100px; background-color: #9acfea"
ng-mouseenter="onMouseEnter($event)"
ng-mouseleave="onMouseLeave($event)"
ng-mouseover="onMouseOver($event)"
ng-mousemove="onMouseMove($event)"
ng-mouseup="onMouseUp($event)"
ng-mousedown="onMouseDown($event)">
</div>
<div>マウス座標 - ({{mouse.x}},{{mouse.y}})</div>
<ul>
<li ng-repeat="msg in messages track by $index">{}</li>
</ul>
DOMイベントのディレクティブ共通で$eventという変数が用意されていて、これらはonイベントのevent変数と同じく扱えます。
ただし、$eventの中身も同様にブラウザの挙動の違いに影響するので注意が必要です。
例えばイベントが発生した要素上のX座標を取得したい場合、offsetXプロパティを利用しますが、FirefoxではlayerXのプロパティを利用するので、これらの違いを吸収する処理は（1）のように、利用者の側で記述する必要があります。
リスト2 ngMouse関連のイベント処理（controllers/mousecontroller.jsの抜粋）
app.controller('mouseController',['$scope',function($scope){
$scope.messages = [];
$scope.mouse = {
x : 0,
y : 0
};
$scope.onMouseEnter = function($event){
$scope.messages.unshift("ngMouseenter");
};
$scope.onMouseLeave = function($event){
$scope.messages.unshift("ngMouseleave");
};
$scope.onMouseOver = function($event){
$scope.messages.unshift("ngMouseover");
};
$scope.onMouseUp = function($event){
$scope.messages.unshift("ngMouseup");
};
$scope.onMouseDown = function($event){
$scope.messages.unshift("ngMousedown");
}
$scope.onMouseMove = function($event){
$scope.mouse.x = ( $event.offsetX ) ? $event.offsetX : $event.layerX; //（1）$eventの結果はブラウザによって若干の違いがある
$scope.mouse.y = ( $event.offsetY ) ? $event.offsetY : $event.layerY;
};
}]);
図1 ngMouse関連の実行結果