Angularで「イベントハンドラー」を登録するには？（Event Binding）：Angular TIPS
要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
【対応バージョン】
Angular 4以降。v4時点で執筆しました。
Angularでは、イベントハンドラーもデータバインディング構文を使って設定します。Property BindingやAttribute Bindingが、コンポーネントの値（プロパティ）をビューに伝える、コンポーネント→ビュー方向のバインド構文とするならば、Event Bindingはビューで発生したイベントの情報をコンポーネントに通知する、ビュー→コンポーネント方向のバインド構文です。
例えば以下は、ボタンをクリックすると、現在時刻を表示する例です。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!--イベントハンドラーを登録-->
<input type="button" value="現在時刻" (click)="onclick()" />
<div>{{result}}</div>
`,
})
export class AppComponent {
// 変数resultを初期化
result = '現在時刻は不明です。';
// ボタンクリック時に現在時刻を表示
onclick() {
this.result = `現在時刻は、${new Date().toLocaleTimeString()}です。`;
}
}
Event Bindingの構文
Event Bindingの構文は、以下の通りです。
［構文］Event Binding
(event)="statement"
- event： イベント名
- statement： イベント発生時に実行されるステートメント
これでイベントeventが発生した時に、命令群statementを実行しなさい、という意味になります。利用できるイベントには、以下のようなものがあります。
| イベント | 概要 |
|---|---|
| click | クリック時 |
| dblclick | ダブルクリック時 |
| mousedown | マウスボタンを押した時 |
| mouseup | マウスボタンを離した時 |
| mouseenter | マウスポインターが要素に入った時 |
| mousemove | マウスポインターが要素内を移動した時 |
| mouseleave | マウスポインターが要素から離れる時 |
| keydown | キーを押した時 |
| keypress | キーを押し続けている時 |
| focus | 要素にフォーカスが当たった時 |
| blur | 要素からフォーカスが外れた時 |
| input | 入力値が変更された時 |
| select | テキストが選択された時 |
| keyup | キーを離した時 |
| reset | リセット時 |
| submit | サブミット時 |
| 利用できる主なイベント | |
Event Bindingの右式には任意の命令群（テンプレートステートメント）を指定できます。テンプレートステートメントの規則は、{{...}}式のそれに似ていますが、微妙に異なる点もあるので、以下にまとめておきます。
【1】利用できない構文がある
テンプレートステートメントでは、以下の構文は利用できません。
- new演算子
- インクリメント／デクリメント演算子（++、--）
- 複合代入演算子（+=、-=など）
- ビット演算子（|、&）
- テンプレート演算子
{{...}}式では利用できなかった=演算子、連結演算子（;、,）も、テンプレートステートメントでは利用できる点に注目してください。
【2】グローバル名前空間上のオブジェクトは参照できない
{{...}}式と同じく、Event Bindingのコンテキストは、コンポーネントのインスタンスです。つまり、{{...}}式からは、グローバル名前空間にあるwindow、documentのようなオブジェクトにアクセスすることはできません。
【3】テンプレートステートメントのガイドライン
【1】を見ても分かるように、テンプレートステートメントは{{...}}式よりも自由な記述が可能です（例えば、;を利用できるので、複合的な文も表せます）。ただし、ビューとコンポーネントの役割を分離するという意味で、テンプレートステートメントで複雑なコードを表すのは避けるべきです。一般的には、イベントハンドラーの呼び出し、もしくは簡単なプロパティの割り当て程度にとどめるべきです。
Event Bindingの別構文
Event Bindingでは、以下のような別構文も利用できます。イベント名を丸かっこでくくる代わりに、on-＜event＞属性で表します。例えば先ほどのサンプルは、以下のように書き換えても同じ意味です。
<input type="button" value="現在時刻" on-click="onclick()" />
いずれの構文を利用するかは好みにもよりますが、まずはアプリの中では統一していくべきです。本連載では、標準的な(event)構文を優先して利用していきます。
処理対象：テンプレート構文（Template Syntax） カテゴリ：基本
処理対象：Event Binding（イベントバインディング） カテゴリ：テンプレート構文（Template Syntax）
処理対象：バインディング構文（Binding Syntax） カテゴリ：テンプレート構文（Template Syntax）
処理対象：(イベント名) = "テンプレートステートメント"｜on-イベント名 = "テンプレートステートメント" カテゴリ：テンプレート構文（Template Syntax） > バインディング構文（Binding Syntax）
Copyright© Digital Advantage Corp. All Rights Reserved.