AngularJSアプリ開発に役立つ小粒なライブラリ ～ ストレージ／イベント処理／入力値検証
AngularJSアプリ開発を支援する便利モジュール（10）
ダウンロード サンプルファイル (524.7 KB)
AngularJS非標準のイベントリスナーを実装する - UI Event
AngularJSでは、ng-click、ng-submitをはじめ、イベントに応じてリスナーを紐付けるために、専用のディレクティブを用意しています（詳しくは、別稿も参照してください）。
そして、これら標準のディレクティブでは提供されないイベントを扱うのが、UI Eventの役割です。Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-ui-event
たとえば以下は、ページの枠内で右クリックした場合に、コンテキストメニューを表示しないようにする例です。これには、contextmenuイベントで、イベントのデフォルトの挙動（＝コンテキストメニューの表示）をキャンセルします。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link href="css/event.css" rel="stylesheet" />
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）event.min.jsをインポート -->
<script src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script src="scripts/event.js"></script>
</head>
<body ng-controller="MyController">
<!-- （3）ハッシュ形式でリスナーを紐づけ -->
<div ui-event="{ contextmenu : 'oncontext($event)' }">
右クリックしてください。
</div>
</body>
</html>
// （2）ui.eventモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.event' ])
.controller('MyController', ['$scope', function($scope) {
$scope.oncontext = function($event) {
// （4）イベント標準の挙動をキャンセル
$event.preventDefault();
};
}]);
UI Eventを利用するには、ライブラリ本体（event.min.js）をインポートした上で、アプリモジュール（myApp）からはui.eventモジュールへの依存関係を宣言します（2）。
あとは、ui-event属性で「イベント名: リスナー」のハッシュ形式でリスナーを紐づけます（3）。この例では、contextmenuイベントを一つ登録しているだけですが、もちろん、複数のイベントをまとめて登録することも可能です。
イベントリスナーの側では、$eventオブジェクトを介して、preventDefaultメソッドを呼び出すことで、イベント標準の挙動をキャンセルできます（4）。
サンプルを実行して、ページ上でマウスを右クリックしても、コンテキストメニューが表示されないこと、（4）のpreventDefaultメソッド呼び出しをコメントアウトすると、表示されるようになることを、それぞれ確認してください。
この記事は参考になりましたか？
- AngularJSアプリ開発を支援する便利モジュール連載記事一覧
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、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本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト（ウイングスプロジェクト）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
