SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

次のページ
その他のディレクティブ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8624 2015/06/15 13:57

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング