AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第8回

　本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回はHTMLのDOMイベントとこれまでのディレクティブ紹介から紹介しきれなかった、知っておくと便利なディレクティブや注意したいディレクティブを紹介します。DOMイベントにはよく利用するイベントが、あらかじめAngularJSでも用意されています。また、AngularJSを使っているとちょっと困ってしまうケースや、AngularJSが自動で行っているがゆえに不思議に思ってしまう動作などもあります。しばらくAngularJSを使っていると遭遇する問題ではありますが、知らないとはまってしまうことがあるので是非、知っておくとよいでしょう。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（41.0）、IE11、Firefox（36.0）、Safari（8.0.3）の環境にて確認を行っています。

DOMイベントを扱うためのディレクティブ

　AngularJSでは独自のディレクティブ（属性）を利用してDOM要素とイベントリスナーを関連づけていきます（表1）。従来のonclickなどHTML標準の属性では、動作しませんので注意してください。

表1　イベント属性に対応したDOMイベントディレクティブ一覧

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関連の実行結果