みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Angularの解説シリーズです。
今回はAngularのイベントリスナーについて学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- イベントリスナーの作り方がわかる!
- 主要なイベントリスナーがわかる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansboxを使ってね!
イベントリスナーの基本
イベントの受け取りかた
■ 構文
<タグ名 (イベント名)="処理"></タグ名>
このように記述することで、イベントを受け取る事ができます。
主なイベント
- 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フォローしてもらえると嬉しいです🦈