詳細ガイド
テンプレート構文

イベントバインディング

イベントバインディングを使用すると、キーストローク、マウスの動き、クリック、タッチなどのユーザーアクションをリスンし、それに応答できます。

イベントへのバインディング

HELPFUL: プロパティへのバインディングの詳細については、プロパティバインディングを参照してください。

イベントにバインディングするには、Angularのイベントバインディング構文を使用します。 この構文は、等号の左側に括弧で囲まれたターゲットイベント名、右側に引用符で囲まれたテンプレートステートメントという構成です。

次の例を作成します。ターゲットイベント名はclick、テンプレートステートメントはonSave()です。

イベントバインディング構文

      
<button (click)="onSave()">Save</button>

イベントバインディングは、ボタンのクリックイベントをリスンし、クリックが発生するたびにコンポーネントのonSave()メソッドを呼び出します。

構文図

イベントターゲットの特定

イベントターゲットを特定するために、Angularはターゲットイベント名が既知のディレクティブのイベントプロパティと一致するかどうかをチェックします。

次の例を作成します。（AngularはmyClickがカスタムClickDirectiveのイベントかどうかをチェックします）

src/app/app.component.html

      
<h1 id="event-binding">Event Binding</h1>
<div class="group">
  <h3>Target event</h3>
  <button type="button" (click)="onSave($event)">Save</button>
  <button type="button" on-enter="onSave()">on-click Save</button>
  <h4>myClick is an event on the custom ClickDirective:</h4>
  <button type="button" (myClick)="clickMessage=$event" clickable>click with myClick</button>
  {{ clickMessage }}
</div>
<div class="group">
  <h3>$event and event handling statements</h3>
  <h4>Result: {{ currentItem.name }}</h4>
  <input [value]="currentItem.name"
         (input)="currentItem.name=getValue($event)">
  without NgModel
</div>
<div class="group">
  <h3>Binding to a nested component</h3>
  <h4>Custom events with EventEmitter</h4>
  <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
  <h4>Click to see event target class:</h4>
<div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
  <div class="child-div">Click me too! (child) </div>
</div>
<h3>Saves only once:</h3>
<div (click)="onSave()" clickable>
  <button type="button" (click)="onSave($event)">Save, no propagation</button>
</div>
<h3>Saves twice:</h3>
<div (click)="onSave()" clickable>
  <button type="button" (click)="onSave()">Save with propagation</button>
</div>

ターゲットイベント名myClickがClickDirectiveの出力プロパティと一致しない場合、Angularは代わりに基になるDOM要素のmyClickイベントにバインドします。

キーボードイベントへのバインディング

Angularのバインディング構文を使用して、キーボードイベントにバインドできます。キーボードイベントにバインドするキーまたはコードを指定できます。keyフィールドとcodeフィールドは、ブラウザのキーボードイベントオブジェクトのネイティブな一部です。デフォルトでは、イベントバインディングはキーボードイベントのkeyフィールドを使用することを前提としています。codeフィールドも使用できます。

キーの組み合わせは.（ピリオド）で区切ることができます。たとえば、keydown.enterを使用すると、enterキーにイベントをバインドできます。shift、alt、control、Macのcommandキーなどの修飾子キーも使用できます。次の例は、キーボードイベントをkeydown.shift.tにバインドする方法を示しています。

      
<input (keydown.shift.t)="onKeydown($event)" />

オペレーティングシステムによっては、一部のキーの組み合わせが期待するキーの組み合わせではなく、特殊文字を作成することがあります。たとえばmacOSでは、オプションキーとシフトキーを同時に使用すると特殊文字が作成されます。keydown.shift.alt.tにバインドすると、macOSではその組み合わせによってtではなくˇという文字が生成されます。これはバインディングと一致せず、イベントハンドラーはトリガーされません。macOSでkeydown.shift.alt.tにバインディングするには、この例に示すようにkeydown.code.shiftleft.altleft.keytなどのcodeキーボードイベントフィールドを使用して、正しい動作を取得します。

      
<input (keydown.code.shiftleft.altleft.keyt)="onKeydown($event)" />

codeフィールドはkeyフィールドよりも具体的なものです。keyフィールドは常にshiftを報告しますが、codeフィールドはleftshiftまたはrightshiftを指定します。codeフィールドを使用する場合、必要なすべての動作をキャッチするために、別々のバインディングを追加する必要がある場合があります。codeフィールドを使用すると、macOSのshift + optionの動作などのOS固有の動作を処理する必要がなくなります。

詳細については、keyとcodeの完全なリファレンスを参照してください。

パッシブイベントへのバインディング

Angularはパッシブイベントリスナーもサポートしています。

これは、ほとんどのアプリケーションでは不要な高度なテクニックです。パフォーマンスの問題を引き起こしている頻繁に発生するイベントの処理を最適化する必要がある場合に役立ちます。

たとえば、スクロールイベントをパッシブにするには、src/index.htmlで特別なzone.jsフラグを設定する必要がある場合があります。

      
<!doctype html>
<html>
  <head>
    <script>
      window.__zone_symbol__PASSIVE_EVENTS = ['scroll'];
    </script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

これらの手順の後、scrollイベントのイベントリスナーを追加すると、リスナーはpassiveになります。

上記の場合、zone.jsを使用しているアプリケーションのみに適用されることに注意してください。

次へ