Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0006 クリックイベントが発生した要素の$eventオブジェクトの取得

参考にさせて頂いたページ

AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう (1/3):CodeZine(コードジン)

ng-app.jsの記述内容

例として以下の通り。

// myAppモジュールを作成
var app = angular.module('myApp', []);
// myAppモジュールにSampleCtrlコントローラーを登録
app.controller('SampleCtrl', function($scope) {
  // onclickメソッドを定義
  $scope.onclick = function($event) {
    console.log($event);
    console.log($event.path[0]);
    console.log($event.srcElement.nextElementSibling);
  };
});

index.htmlの記述内容

例として以下の通り。

<div ng-controller="SampleCtrl">
  <button ng-click="onclick($event)">ボタン</button>
  <p>nextElementSiblingです。</p>
</div>

このソースコードについて

ng-click属性が付与されたbutton要素をクリックすることによって、$eventを引数としてonclickメソッドが実行される。

$eventオブジェクトはconsole.log($event);としたらわかるように、色々なプロパティを保持している。

以下のような感じで、プロパティが取得できる。

console.log($event.path[0]);
console.log($event.srcElement.nextElementSibling);