sugulogの日記

JavaScript、addEventListenerやdispatchEvent!ユーザー操作を監視するイベントについて学ぼう!!

スポンサードリンク

f:id:sugulog:20210429225500p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのaddEventListenerということで

  • ユーザー操作を監視するイベント 

について簡単に解説します!!

その為このブログを読むことで、addEventListenerについて理解が深まるのはもちろん、ユーザー操作を監視するイベントについても知識が深まります。

是非最後までご愛読ください。

 

今回は、

  • イベント

  • addEventListener()

  • removeEventListener()

  • dispatchEvent

  • matchMedia()

の順で解説していきます。

では早速、みていきましょう!!

・イベント

クリックなどのユーザー操作やシステムの中で生じた動作や出来事のこと。

この動作や出来事(イベント)を監視する機能がJavaScriptには備わっています。

JavaScriptではこのイベントを監視し処理をさせることで、ユーザーがクリックした時にボタンの表示を変えたりなどの実装が可能です。

さらにJavaScriptで取得したdiv要素やwindow、documentなど、イベントの対象となるオブジェクトのことをイベントターゲットと言い、イベントターゲットでイベントが発生した時に行う処理のことをイベントリスナーと言います。

そしてイベントターゲット、イベント、イベントリスナーを関連づけるメソッドがaddEventListener()です。

・addEventListener()

イベント発生時に呼び出す関数を指定できるメソッド。

基本的にはイベントターゲット.addEventListener(イベント,イベントリスナー)で記述します。

addEventListenerで指定するイベントリスナーは関数を定義します。

 では実際にコードを見てみましょう。

f:id:sugulog:20210429185949p:plain

上記ではイベントターゲットがbtnです。

そしてイベントではclickというイベントを指定しています。

clickはその名の通りクリックという動作のイベントです。

そしてイベントリスナーでは関数を定義するので、function、アロー関数、関数名で定義する方法があります。

そしてこの関数の中で行われる処理がイベントリスナーです。

f:id:sugulog:20210429190850p:plain

また第三引数でオプションを指定することも可能です。

例えばonce(イベントリスナーの呼び出しを1回のみにする)というオプションであれば以下のように指定できます。

f:id:sugulog:20210429192033p:plain

removeEventListener()

イベントリスナーを削除する。

addEventListener()で指定したイベントの監視を取り止めたい時に使用します。

では実際に記述してみましょう。

f:id:sugulog:20210429224555p:plain

ただし仕様する際の注意点として、

  1. アロー関数には使えない
  2. addEventListener()と引数(オプションも含め)を同じにする必要がある

がありますので気をつけましょう。 

・dispatchEvent()

引数で指定したイベントを発生させる。

指定したイベントターゲットに対し、任意のイベントを発生させることができます。

引数で指定するイベントはnew Event()を使用しイベント自体を生成する必要があります。

では実際に見てみましょう。

f:id:sugulog:20210522233728p:plain

addEventListenerでイベントが発生した時の処理を記述し、dispatchEventでイベントを発生させています。

今回はsetTimeoutを使い5秒後にdispatchEventで指定したイベントが実行されるようにしました。

またdispatchEventの引数ではイベントを生成しています。

 

以上、今回のブログでした。

 addEventListenerについて理解が深まり、ユーザー操作を監視するイベントについても知識が深まりましたか??

JavaScriptにおいてイベントの理解は必須です。

少しずつ知識を深めていきましょう(^_^)/

sugulog.hatenadiary.jp

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!