【Angular】イベントリスナーを作ろう！【サンプルあり】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はAngularのイベントリスナーについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

イベントリスナーの作り方がわかる！
主要なイベントリスナーがわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

イベントリスナーの基本
1. イベントの受け取りかた
2. 主なイベント
イベントリスナーをつくろう！
1. 作りたいもの
クリックイベントをつくろう
1. ボタン用コンポーネントを作ろう
2. マウスイベント用コンポーネントを作ろう
まとめ

イベントリスナーの基本

イベントの受け取りかた

■ 構文

<タグ名　(イベント名)="処理"></タグ名>

このように記述することで、イベントを受け取る事ができます。

主なイベント

click・・・クリック
dbclick・・・ダブルクリック
mousedown・・・マウスボタン押下
mouseup・・・マウスボタンを離す
mouseenter・・・ホバー
mousemove・・・ホバー状態でマウスを動かす
mouseleave・・・ホバーアウト
focus・・・フォーカス
blur・・・フォーカスアウト
keydown・・・キーを押下
keypress・・・キーを押し続ける
keyup・・・キーを離す
input・・・入力内容を変更
select・・・テキスト選択
reset・・・リセット
submit・・・送信

これらがよく使うイベントだよ！

イベントリスナーをつくろう！

作りたいもの

今回つくりたいもの

クリックで現在時刻を表示するボタン
マウスホバー/アウトでメッセージを表示する要素

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

クリックイベントをつくろう

ボタン用コンポーネントを作ろう

コンポーネントの作成

ng generate component btn-event

btn-event.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-btn-event',
  templateUrl: './btn-event.component.html',
  styleUrls: ['./btn-event.component.css'],
})
export class BtnEventComponent implements OnInit {
  // 時刻表示用
  myClock = '';

  constructor() {}

  ngOnInit(): void {}

  getTime(): void {
    // 現在時刻を取得し、myClockに代入する
    this.myClock = new Date().toLocaleString();
    console.log('クリックされました！');
  }
}

ここでは、クリックされた際に呼び出される関数を設定したよ！

btn-event.component.html

<div class="">
  <!-- クリックされると、getTime関数を呼び出す -->
  <button (click)="getTime()">現在時刻</button>
  <span>{{ myClock }} </span>
</div>

ボタンにクリックイベントを受け取る設定をしたよ！

app.component.html

<!-- mouse-eventコンポーネントの埋め込み -->
<app-btn-event></app-btn-event>

↓

実際の動作は完成形を見てね！

マウスイベント用コンポーネントを作ろう

コンポーネントの作成

ng generate component mouse-event

mouse-event.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mouse-event',
  templateUrl: './mouse-event.component.html',
  styleUrls: ['./mouse-event.component.css'],
})
export class MouseEventComponent implements OnInit {
  // メッセージ
  message = '';

  constructor() {}

  ngOnInit(): void {}

  // ホバー時の処理
  myHover(): void {
    this.message = 'ホバーされました';
  }

  // マウスアウト時の処理
  myLeave(): void {
    this.message = 'マウスが離れました';
  }
}

ホバー/マウスアウトされた際に呼び出される関数を設定したよ！

mouse-event.component.html

<div>
  <span class="hover-area" (mouseenter)="myHover()" (mouseleave)="myLeave()">
    ここをホバーして！
  </span>
  <span>{{ message }}</span>
</div>

要素にマウスイベントを受け取る設定をしたよ！

app.component.html

<!-- mouse-eventコンポーネントの埋め込み -->
<app-mouse-event></app-mouse-event>

■ マウスアウト

これでマウスイベントを受け取ると
メッセージを表示するHTML要素が完成しました。

実際の動作は完成形を見てね！

まとめ

イベントリスナーの受け取り方
<タグ名　(イベント名)=”処理”>

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram