【JavaScript】addEventListener()でイベント発生時に処理を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年08月15日に投稿されました。)

JavaScriptイベント発生時に処理を行うにはaddEventListener()を使用します。

addEventListener()とは、イベントが発生した際に処理を実行するメソッドになります

そのため、クリックやスクロールなどの何かしらのアクションが行われた際にどのような処理を行うのかを設定することができます。

また、引数を追加することで一度きりのイベントにするのかバブリングイベントにするのかなどの細かなオプション設定することができます、

JavaScriptではイベントが始まらないと処理が始まらないため、addEventListener()についてまだ理解していない方はこの記事を読んで覚えておきましょう。

今回は、JavaScript()のaddEventListener()でイベント発生時に処理を行う方法について紹介していきます。

この記事はこんな方におすすめ

要素にどのイベントを付与するか悩んでいる場合

addEventListener()のイベントハンドラについて知りたい場合

addEventListener()とは

addEventListener()とはイベントが発生した際に処理を実行するよう設定できるメソッドとなります。

「マウスでボタンをクリックした時」や「マウスをスクロールした時」など何かしらのアクションが起きた際にどのような処理をするのか設定することができます。

addEvetListener()の書き方

addEvetListener()の書き方は下記のようになります。

セレクタの後にaddEventListener()と追記し、括弧の中に必須の引数を2つ指定することで使用することができます。

また、任意の引数を1つ設定することができ、合計で3つの引数を指定して使用することもできます。

addEvetListener()の引数

addEvetListener()の引数は下記のようになります。

  1. イベント(必須):
    イベント名を文字列で指定する
  2. イベントハンドラ(必須):
    イベントが発生したときのイベントを関数で指定する
  3. オプション(任意):
    イベントのオプションをオブジェクトで指定する

また、イベントハンドラで指定する関数は下記の3パターンがあります。

● 外部関数

● 無名関数

● アロー関数

関数名を指定する「外部関数」、処理内容を直接指定する「無名関数、記述を省略できる「アロー関数」で指定することができます。

Sossy

僕は複数の処理が存在する場合は「外部関数」、単一の処理である場合は「無名関数」、「アロー関数」のように使用する目的で使い分けています。

addEventListener()でイベント発生時に処理を行うサンプルコード

addEventListener()でイベント発生時に処理を行うサンプルコードをご紹介します。

ここでは下記の6つのパターンでaddEventListener()を使用します。

  1. ロードした後に処理を行う場合
  2. クリックした後に処理を行う場合
  3. マウスを移動させている最中に処理を行う場合
  4. フォームを送信した後に処理を行う場合
  5. フォーカスを当てた後に処理を行う場合
  6. スワイプしている最中に処理を行う場合

もし、addEventListener()のイベント一覧について詳しく知りたい場合は下記の記事絵をご参考ください。

ロードした後に処理を行う場合

ロードした後に処理を行う場合はイベントにloadを指定します。

loadとは、全ソースの読み込みが完了した時に発生するイベントとなります。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してロードした後に処理を行った結果

addEventListener()によってロードした後に処理を行っています。

そのため、Webページをロードすると「loadイベントが発動しました。」の文字列が表示されています。

クリックした後に処理を行う場合

クリックした後に処理を行う場合はイベントにclickを指定します。

clickとはオブジェクトをクリックした後に発生するイベントになります。

そのため、ボタンなどをクリックしたタイミングで処理を行いたい場合に使用することができます。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してクリックした後に処理を行った結果

addEventListener()によってクリックした後に処理を行っています。

そのため、ボタンをクリックすると、背景色がランダムに変化しています。

マウスを移動させている最中に処理を行う場合

マウスを移動させている最中に処理を行うには、イベントにmousemoveを指定します。

mousemoveとは、オブジェクト内にマウスが移動する時に発生するイベントになります。

そのため、マウスを動かしたタイミングで処理を行う場合はこちらのイベントを使用します。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してマウスを移動させている最中に処理を行った結果

addEventListener()によってマウスを移動させている最中に処理を行っています。

そのため、マウスを移動させた場所にオブジェクトが移動されます。

フォームを送信した後に処理を行う場合

フォームを送信した後に処理を行うにはイベントにsubmitを指定します。

submitとはフォームを送信した後に発生するイベントになります。

そのため、フォームで送信した後に処理を行いたい場合に使用することができます。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してフォームを送信した後に処理を行った結果

addEventListener()によってフォームを送信した後に処理を行っています。

そのため、送信ボタンを押すと、「testを送信しました。」の文字列が表示されています。

フォーカスを当てた時に処理を行う場合

フォーカスを当てた時に処理を行う場合はfocusを指定します。

focusとは入力フォームにフォーカスを当てた後に発生するイベントになります。

そのため、値を入力した後に処理行う場合はこちらのイベントを使用します。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してフォーカスを当てた時に処理を行った結果

addEventListener()によってフォーカスを当てた時に処理を行っています。

そのため、入力値にフォーカスを当てると「タイムスタンプ」が表示されています。

スワイプしている最中に処理を行う場合

スワイプしている最中に処理を行うにはイベントにtouchmoveを指定します。

touchmoveとはオブジェクトのタッチして移動させている最中に発生するイベントになります。

そのため、タッチ後のスワイプを行った後に処理行う場合はこちらのイベントを使用します。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してタッチ操作を動かした後に処理を行った結果

addEventListener()によってスワイプしている最中に処理を行っています。

そのため、オブジェクトをタッチしてスワイプするとオブジェクトも動きます。

イベントハンドラに引数を指定してaddEventListener()でイベント発生時に処理を行う場合

イベントハンドラに引数を指定してaddEventListener()でイベント発生時に処理を行うには、引数を下記のオブジェクトで指定します。

  1. ハンドラに渡したい引数::
    オリジナルのキーを指定し、「this.キー名」を使用して呼び出す
  2. 関数:
    handleEventというキーを指定する

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してイベントハンドラに引数を指定してイベント発生時に処理を行った結果

addEventListener()によってイベントハンドラに引数を指定してイベント発生時に処理を行っています。

そのため、オブジェクトをクリックすると変数の値が表示されます。

オプションを指定してaddEventListener()でイベント発生時に処理を行う場合

addEventListener()でオプションを指定してイベント発生時に処理を行うには、オブションをオブジェクトで指定します。

設定したいオブションをキーで指定し、設定する場合はtrue、設定しない場合はfalseを指定します。

そして、設定できるオプションは下記の3つになります。

  1. once
  2. passive
  3. capture

イベントを1回きりにする場合

イベントを1回きりにする場合はonceのキーにtrueを設定します。

こちらを設定することで、一度イベントの処理が行われますが、2度目からはイベントが発生しても処理が行われなくなります。

● index.html

● style.css

● main.js

実行結果

addEventListener()でイベントを1回きりに設定して処理を行った結果

addEventListener()のオプションにonceを指定してイベント発生時に処理を行っています。

そのため、ボタンをクリックするとログに回数がカウントされますが、2回目をクリックするとログの回数がカウントされません。

スクロールジャンクが発生しないよう設定する場合

スクロールジャンクが発生しないよう設定する場合はpassiveのキーにtrueを設定します。

スクロールジャンクとはスクロールする際に、スクロールを停止する処理と重なってしまい、スクロールがガタついてしまうような状態のことをいいます。

そのため、こちらを設定することで、スクロールジャンクが発生しなくなるため、パフォーマンスが劇的に向上します。

● index.html

● style.css

● main.js

実行結果

addEventListener()でスクロールジャンクが発生しないよう設定して処理を行った結果

addEventListener()のオプションにpassiveを指定してイベント発生時に処理を行っています。

そのため、オブジェクトをタッチしてスワイプすると、画面全体も自動でスクロールされています。

イベントをキャプチャリングとして設定する場合

イベントをキャプチャリングとして設定する場合はcaptureのキーにtrueを設定します。

キャプチャリングとはバブリングの逆であり、発生した要素に向かってイベントが走ることを言います。

こちらを設定することで、バブリングとは逆に伝染して処理が行われるようになります。

● index.html

● style.css

● main.js

実行結果

addEventListener()でイベントをキャプチャリングとして設定して処理を行った結果

addEventListener()のオプションにcaptureを指定してイベント発生時に処理を行っています。

そのため、オブジェクトクリックすると、DOMツリーの上から順にイベント処理が発動されています。

addEventListener()を使用した実際のケース

addEventListener()を使用した実際のケースについてご紹介します。

例えば、addEventListener()を使用してスマホ版のメニューを表示するコードを作成します。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してスマホ版のメニューを作成した結果

addEventListener()によってスマホ版のメニューを作成しています。

そのため、ボタンを押すと縦型のメニューが表示され、×ボタンを押すとメニューが非表示になります。

addEventListener()でイベント処理を順番に変更する方法

addEventListener()で設定したイベントを順番に変更するには、switch-case文を使用してイベントのタイプを条件に分岐させます。

● index.html

● style.css

● main.js

実行結果

addEventListener()でイベント処理を順番に変更した結果

addEventListener()でイベント処理を順番に変更しています。

そのため、「clickイベント → mouseleaveイベント → srcollイベント」の順番で処理が実行することで、オブジェクトの背景色が変化しています。

jQueryでイベント発生時に処理を行う場合

jQueryでイベント発生時に処理を行うにはon()を使用します。

on()とは、オブジェクトにイベント処理を紐づけることができるメソッドになります。

そのため、addEventListener()と同じように使用することができます。

● index.html

● style.css

● main.js

実行結果

on()を使用してベント発生時に処理を行った結果

on()によってイベント発生時に処理を行っています。

そのため、ボタンを押すと、「クリックイベントが発生しました。」という文字列が表示されます。

もし、on()について詳しく知りたい場合は下記の記事をご参考ください。

設定したイベントを解除する場合

設定したイベントを解除するにはremoveEventListener()を使用します。

removeEventListener()とは、設定されたイベント処理を削除するメソッドになります。

そのため、addEventListener()で設定したオブジェクトのイベント処理を解除することができます。

● index.html

● style.css

● main.js

実行結果

removeEventListener()を使用して設定したイベントを解除した結果

removeEventListener()によって設定したイベントを解除しています。

そのため、発動ボタンを押すと、イベント処理が発生しますが、解除ボタンをクリックして発動ボタンをクリックすると、処理が行れません。

非同期のタイミングでイベント発生時に処理を行う場合

非同期のタイミングでイベント発生時に処理を行う場合はdispachEvent()を使用します。

dispachEvent()とは対象となるターゲットに指定したイベントを発生させるメソッドになります。

そのため、dispachEvent()を使用することで、非同期のタイミングでイベント発生時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

dispachEvent()で非同期のタイミングでイベント発生時に処理を行った結果

dispachEvent()によって非同期のタイミングでイベント発生時に処理を行っています。

そのため、「ボタン1」を押すと、ボタン1だけでなく、「ボタン2」のclickイベントも発動し、それぞれのログが表示されています。

まとめ

⚫︎ addEventListener()とは、イベントが発生した際に処理を実行するよう設定できるメソッドである。

⚫︎ addEventListener()は下記の引数を指定して使用する。
・イベント(必須)
・イベントハンドラ(必須)
・オプション(任意)

⚫︎ addEventListener()でロードした後に処理を行うにはイベントにloadを指定する。

⚫︎ addEventListener()でクリックした後に処理を行うにはイベントにclickを指定する。

⚫︎ addEventListener()でマウスを動している最中に処理を行うにはイベントにmousemoveを指定する。

⚫︎ addEventListener()でフォームを送信した後に処理を行うにはイベントにsubmitを指定する。

⚫︎ addEventListener()でフォーカスした後に処理を行うにはイベントにfocusを指定する。

⚫︎ addEventListener()でスワイプしている最中に処理を行うにはイベントにtouchmoveを指定する。

⚫︎ addEventListener()のイベントハンドラに引数を指定してイベント発生時に処理を行うには、下記のフォーマットでオブジェクトを指定する。
・オリジナルキー:
イベントハンドラに渡したい引数
・handleEvent:
イベント処理の関数

⚫︎ addEventListener()でイベント処理を一度きりに設定するにはオプションのonesにtrueを指定する。

⚫︎ addEventListener()でスクロールジャンクが発生しないよう設定するにはオプションのpassiveにtrueを指定する。

⚫︎ addEventListener()でイベント処理をキャプチャリングするにはオプションのcaptureにtrueを指定する。

⚫︎ addEventListener()でイベント処理を順番に変更するにはswitch-case文を使用する

⚫︎ 設定したイベントを解除するにはremoveEventListener()を使用する。

⚫︎ 非同期のタイミングでイベント発生時に処理を行うにはdispachEvent()を使用する。