JavaScriptにてイベントの処理を行うaddEventListenerとは？
はじめに
IT技術が進化してきている中で、Webサービスも発展を繰り返し、利用者の利便性を向上させてきています。Webサービスに関しては、主に利用者と接点を持つフロントエンドと、フロントエンドで実行された内容を裏側で処理を行うバックエンドと大きく分けることができます。今回はフロントエンド側に焦点を置きます。フロントエンドは主にHTML、CSSで表面を構築され、JavaScriptを追加することで動的な挙動を与えることができ、Webページの質の向上につながります。この記事ではJavaScriptを用いて動的要素を追加する（イベントの処理を実行する）addEventListenerの使い方について記載していきます。
イベント処理を行うaddEventListenerメソッドとは？
JavaScriptを用いてイベント処理を行うには、addEventListenerメソッドを用います。これはイベントの種類をリスナーに登録し、登録したイベントが発生したら処理を行う仕組みを提供します。JavaScript以外の言語でもイベントと処理を結びつけるリスナーの考え方は重要になりますので注目しておきましょう。addEventListenerの使い方について、サンプルコードを以下に記載します。
要素名.addEventListener(‘イベント名’, function(){},false);の形で記載します。ます、要素名に関してはbtnやa要素などを指定します。その後addeventlistenerメソッドを記載し、引数をしていきます。まず1つ目の引数はイベント名を指定します。イベント名の例は以下に記載しておきます。
などが指定できます。マウスやキーボードがトリガーになるだけでなく、Webの読み込み時が完了した時にトリガーになるイベントも指定可能です。次に2つ目の引数ですが、ここにはJavaScriptで用いる関数を指定します。イベントが発生したときに実行したい処理を記載します。後ほどサンプルコードでみていきたいと思います。3つ目の引数はfalseかtureのどちらかを指定します。省略することも可能で、省略した場合はfalseがデフォルトで指定されます。※3つ目の引数に関しては、厳密にはオプションの真偽値を指定するのですが、細かい説明は割愛させていただきます。
これらを踏まえ、イベントの登録から実行されるまでの流れを以下のサンプルコードに記載していくので、順を追って説明していきます。※前提としては、HTML上にフォームのbutton要素があり、id名をbtnとしています。
var event = document.getElementById((‘btn’);btn.addEventListener(‘click’,function(){
console.log("イベントが発生しました");});
まず、JavaScript内のdocumentオブジェクトのgetElementByIdメソッドを用いてHTML上のbtn要素を取得します。その後取得したボタンのフォームがクリックされたらリスナーに登録するようにしています。その後function関数に記載した処理が実行され、コンソール上に文字が表示されます。第3引数は今回省略しています。function関数にはif文を記載して処理の条件分岐を設定したり、表示しているブラウザ上にボタンがクリックされたら文章や画像を挿入したりといった動作を組み込むことが可能です。
また、関数に引数を渡して記述することも可能です。
btn.addEventListener(‘click’,sampleFunc(){});sampleFunc(e){ 引数eを用いた処理 };
上記の通り、指定した関数に引数が存在しても、addEventListener部分の関数の引数は何も指定しません。なので以下のように表記することは出来ないので注意が必要です。
記述してはいけない例: btn.addEventListener(‘click’,sampleFunc(e){});まとめ
この記事ではJavaScriptを用いてWeb上のイベント処理を実装するaddEventListenerメソッドについて紹介しました。まず、処理のトリガーとなるイベントをリスナーに登録し、指定したイベントが発生したら処理が実行されるという流れを抑えておくことが大切です。JavaScriptを用いて動的Webページを作成するためには必須の知識になりますので、JavaScriptの学習を進めていき、使いこなせるようしておくことをおすすめします。そうすることでJavaScriptを用いたフロントエンド技術の向上が見込めます。ご拝読いただきありがとうございました。