addEventListener()メソッド–JavaScriptイベントリスナーのサンプルコード

JavaScriptのaddEventListener()メソッドを使用すると、ユーザーがボタンをクリックしたときなど、指定されたイベントが発生したときに呼び出される関数を設定できます。このチュートリアルでは、コードにaddEventListener()を実装する方法を示します。

イベントとイベントハンドラーを理解する

イベントは、ユーザーまたはブラウザがページを操作したときに発生するアクションです。これらは、Webページの要素を動的に変更させる可能性があるため、重要な役割を果たします。

たとえば、ブラウザがドキュメントの読み込みを終了すると、loadイベントが発生しました。ユーザーがページ上のボタンをクリックすると、clickイベントが発生します。

多くのイベントは、1回、複数回、またはまったく発生しない可能性があります。また、特にユーザーが生成したイベントの場合、イベントがいつ発生するかわからない場合もあります。

これらのシナリオでは、イベントがいつ発生するかを検出するためのイベントハンドラーが必要です。このようにして、イベントがその場で発生したときにイベントに反応するようにコードを設定できます。

JavaScriptは、addEventListener()メソッドの形式でイベントハンドラーを提供します。このハンドラーは、イベントを監視する特定のHTML要素にアタッチでき、要素には複数のハンドラーをアタッチできます。

addEventListener()構文

構文は次のとおりです。

target.addEventListener(event, function, useCapture) 
  • target:イベントハンドラーを追加するHTML要素。この要素はドキュメントオブジェクトモデル(DOM)の一部として存在するため、DOM要素を選択する方法について学習することをお勧めします。
  • eventイベントの名前を指定する文字列。loadclickイベントについてはすでに説明しました。好奇心旺盛な方のために、HTMLDOMイベントの完全なリストを以下に示します。
  • function:イベントが検出されたときに実行する関数を指定します。これは、Webページを動的に変更できる魔法です。
  • useCapture:イベントをキャプチャフェーズまたはバブリングフェーズのどちらで実行するかを指定するオプションのブール値(trueまたはfalse)。イベントハンドラーがアタッチされたネストされたHTML要素(img内などdiv)の場合、この値によって、最初に実行されるイベントが決まります。デフォルトではfalseに設定されています。これは、最も内側のHTMLイベントハンドラーが最初に実行されることを意味します(バブリングフェーズ)。

addEventListener()コード例

これは私が作成した簡単な例addEventListener()で、実際の動作を示しています。

ユーザーがボタンをクリックすると、メッセージが表示されます。別のボタンをクリックすると、メッセージが非表示になります。関連するJavaScriptは次のとおりです。

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

前に示した構文に従ってaddEventListener()ください:

  • ターゲット:HTML要素id='button'
  • 関数:メッセージを表示/非表示にするために必要なコードを設定する匿名(矢印)関数
  • useCapture:デフォルト値の左false

私の関数は、メッセージ要素の可視性を変更する「reveal」と呼ばれるCSSクラスを追加/削除することで、メッセージを表示/非表示にすることができます。

もちろん、コードでは、この関数を自由にカスタマイズしてください。また、無名関数を独自の名前付き関数に置き換えることもできます。

イベントをパラメータとして渡す

クリックされた要素など、イベントに関する詳細情報が必要になる場合があります。この状況では、イベントパラメータを関数に渡す必要があります。

この例は、要素のIDを取得する方法を示しています。

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

ここで、イベントパラメータはという名前の変数eですが、「イベント」などの他の名前で簡単に呼び出すことができます。このパラメータは、ターゲットIDなどのイベントに関するさまざまな情報を含むオブジェクトです。

特別なことをする必要はなく、この方法で関数にパラメーターを渡すと、JavaScriptは自動的に何をすべきかを認識します。

イベントハンドラーの削除

何らかの理由でイベントハンドラーをアクティブ化する必要がなくなった場合、それを削除する方法は次のとおりです。

target.removeEventListener(event, function, useCapture); 

パラメータはと同じaddEventListener()です。

練習は完璧を作る

The best way to get better with event handlers is to practice with your own code.

Here is an example project I did in which I used event handlers to change the color, size, and speed of bubbles flowing across the background of a web page (you will need to click on the central panel to reveal the controls).

Have fun and go make something awesome!

For more beginner-friendly web development knowledge, visit my blog at 1000 Mile World and follow me on Twitter.