Angular TIPS

Angular TIPS

イベントハンドラーを登録するには?(Event Binding)

2017年7月6日

要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。

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

【対応バージョン】 Angular 4以降。v4時点で執筆しました。

 Angularでは、イベントハンドラーもデータバインディング構文を使って設定します。Property BindingAttribute Bindingが、コンポーネントの値(プロパティ)をビューに伝える、コンポーネント→ビュー方向のバインド構文とするならば、Event Bindingはビューで発生したイベントの情報をコンポーネントに通知する、ビュー→コンポーネント方向のバインド構文です。

 例えば以下は、ボタンをクリックすると、現在時刻を表示する例です。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <!--イベントハンドラーを登録-->
    <input type="button" value="現在時刻" (click)="onclick()" />
    <div>{{result}}</div>
  `,
})
export class AppComponent  {
  // 変数resultを初期化
  result = '現在時刻は不明です。';

  // ボタンクリック時に現在時刻を表示
  onclick() {
    this.result = `現在時刻は、${new Date().toLocaleTimeString()}です。`;
  }
}
clickイベントハンドラーを登録するためのコード(app.component.ts)
ボタンクリック時にメッセージを表示
ボタンクリック時にメッセージを表示

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のコンテキストは、コンポーネントのインスタンスです。つまり、{{...}}式からは、グローバル名前空間にあるwindowdocumentのようなオブジェクトにアクセスすることはできません。

3テンプレートステートメントのガイドライン

 1を見ても判るように、テンプレートステートメントは{{...}}式よりも自由な記述が可能です(例えば、;を利用できるので、複合的な文も表せます)。ただし、ビューとコンポーネントの役割を分離するという意味で、テンプレートステートメントで複雑なコードを表すのは避けるべきです。一般的には、イベントハンドラーの呼び出し、もしくは簡単なプロパティの割り当て程度にとどめるべきです。

Event Bindingの別構文

 Event Bindingでは、以下のような別構文も利用できます。イベント名を丸かっこでくくる代わりに、on-<event>属性で表します。例えば先ほどのサンプルは、以下のように書き換えても同じ意味です。

HTML
<input type="button" value="現在時刻" on-click="onclick()" />
on-<event>属性で書き換えたコード

 いずれの構文を利用するかは好みにもよりますが、まずはアプリの中では統一していくべきです。本連載では、標準的な(event)構文を優先して利用していきます。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:Event Binding(イベントバインディング) カテゴリ:テンプレート構文(Template Syntax)
処理対象:バインディング構文(Binding Syntax) カテゴリ:テンプレート構文(Template Syntax)
処理対象:(イベント名) = "テンプレートステートメント"|on-イベント名 = "テンプレートステートメント" カテゴリ:テンプレート構文(Template Syntax) > バインディング構文(Binding Syntax)

※以下では、本稿の前後を合わせて5回分(第14回~第18回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

14. 文字列/配列から部分文字列/要素を抜き出すには?(slice)

JavaScriptのString/Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

15. Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行

新規Angularアプリの作成時にAngular CLIを使うと効率的だ。そのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、そのアプリを起動する方法を説明する。

16. Angular CLIで、Angularアプリのコードを自動生成するには?

Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成してみる。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介する。

17. 【現在、表示中】≫ イベントハンドラーを登録するには?(Event Binding)

要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。

18. フォームの入力値をコンポーネントと同期するには?(双方向バインディング)

テンプレート上のフォーム入力値とコンポーネントのプロパティ値を双方向にバインドするTwo-way Bindingのバインディング構文を説明し、その仕組みを紹介する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社