Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/05/07 14:00

 本連載は、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関連の実行結果
図1 ngMouse関連の実行結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5