Webサイトを作成する時、画面上にボタンやフォームなど、様々な要素を配置しますよね。
それらの要素に対してアクションを起こした際に、ページを遷移したり、或いはダイアログを表示したりなど、特定の処理を行う必要が出てきます。
JavaScriptには、そうしたイベント処理を実装する方法の１つとして、addEventListenerメソッドを使用する方法があります。
今回の記事では、addEventListenerメソッドを使用する方法について、詳しく解説していきたいと思います。
addEventListenerメソッドとは？
addEventListenerメソッドは、JavaScriptでイベント処理を実行したい場合に使用するメソッドです。
イベントリスナーと呼ばれる、特定のイベントが発生した際に実行される関数を、addEventListenerメソッドを使用して対象の要素に登録することができます。
特定のイベントとは、例えば以下のようなものを指します。
- コンテンツのロードが完了した時
- 要素がクリックされた時
- フォーム送信時
- 画面がスクロールされた時
この他にも、様々な種類のイベントに対応することができます。
addEventListenerメソッドの使い方
それでは早速、addEventListenerメソッドの使い方について見ていきましょう。
基本構文
まずは、addEventListenerメソッドの基本構文から解説していきます。
メソッドを使用する際は、以下のような構文で記述します。
【基本構文】
対象要素.addEventListener(イベントの種類, 関数, オプション)第1引数には、関数を実行させたいイベントの種類を指定します。
例えば、要素がクリックされた際に実行したい場合は 「click」、フォーム送信時に実行したい場合は 「submit」 といったように、どのイベントで関数を実行するかを指定します。
第2引数には、イベント発生時に実行する関数を指定します。
ここに指定した関数の処理内容が、対応するイベントが発生した際に実行されます。
第3引数では、主に以下の３つのオプションを設定することができます。（省略可）
既定値はいずれも falseです。
- capture … trueの場合に、キャプチャリングフェーズでイベントを処理する
- passive … trueの場合に、イベント内で preventDefault() を呼び出さないようにする
- once … trueの場合に、1回実行したらイベントリスナーを削除
関数の宣言方法3種類をまとめて解説
addEventListenerメソッドで指定する関数は、主に３つの書き方があります。
1つ目は、メソッド外で宣言されている関数を指定する方法です。
【サンプルコード】
const target = document.getElementById('btn');
function sampleEvent() {
//処理内容
}
btn.addEventListener('click', sampleEvent);別途で宣言した 「sampleEvent()」 という関数をメソッドの引数に指定しています。
処理内容が複雑である場合や、複数の要素に対して共通する処理内容がある場合などに、この方法で記述すると有効的です。
一点、気を付けるべきポイントとして、外部の関数を指定する場合は () を付けずに関数名のみを記述する必要があります。
() を付けて記述してしまうと、関数そのものではなく関数の実行結果を渡すことになってしまうため、注意が必要です。
2つ目は、無名関数（関数リテラル）を指定する方法です。
【サンプルコード】
btn.addEventListener('click' function() {
//処理内容
});この方法は先程とは変わって、メソッドの引数に指定する際に関数を直接記述しています。
メソッド内で関数を宣言することにより、対象の要素ごとの処理が把握しやすくなるという利点があります。
関数の処理内容が多い場合には、反対にコードが見辛くなってしまう原因にもなりかねないため、実行する処理が比較的単純である場合に活用するといいでしょう。
3つ目は、アロー関数を設定する方法です。
アロー関数とは “=>” という矢印のような記号表記を用いた関数の記述方法で、関数リテラルをより簡潔に記述する際に使用します。
【サンプルコード】
btn.addEventListener('click', () => {
//処理内容
});処理内容が一文で完了する場合に関数スコープを表す {} を省略できたりと、少ないコード量で記述できるのが特徴です。
【例】clickイベントの処理を実行する
それでは実際に、addEventListenerメソッドを使用してイベント処理を登録してみましょう。
今回は、以下のボタン要素に対してメソッドを使用し、ボタンがクリックされた際に実行するイベント処理を追加していきます。
【HTMLのサンプルコード】
<button id="btn">サンプルボタン</button>要素に IDが割り振られているので、getElementByIdメソッドを使用して、JavaScriptで対象の要素を取得します。
要素が取得できたら、addEventListenerメソッドでイベントリスナーを登録します。
ボタンがクリックされた際に関数を実行したいので、メソッドの第１引数には 「click」 を指定します。
【サンプルコード】
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
console.log('クリックされました！');
});これで、ボタンをクリックした際に関数が実行されるようになりました。
基本の流れはこのように、IDなどを元に要素を取得し、addEventListenerメソッドでイベントリスナーを登録する形になります。
主要なDOMイベント一覧
基本的な操作方法について確認し終えたところで、addEventListenerメソッドで指定可能なイベントの種類についても解説したいと思います。
全てのイベントを見るには数があまりに多すぎるため、今回はよく使われるものをいくつか抜粋して紹介します。
【Window】
- load … コンテンツのロードが完了した時
- resize … 画面のサイズが変わった時
- blur … ウィンドウからフォーカスが外れた時
- focus …. ウィンドウにフォーカスが当たった時
【Document】
- DOMContentLoaded … DOMの読み込みが完了した時
- scroll … 画面をスクロールした時
【Element】
- click … 要素がクリックされた時
- dblclick … 要素がダブルクリックされた時
- contextmenu … 要素が右クリックされた時
- mousedown … マウスボタンが押された時
- mouseup … マウスボタンを押した状態から離した時
- mouseover … マウスが要素の上にある時
- mouseout … マウスが要素から離れた時
- mousemove … マウスが要素の上で移動した時
- submit … submitボタンが押された時
- reset … フォームの内容がリセットされた時
- change … フォームの選択状態や入力内容が変更された時
- keydown … キーを押した時
- keyup … キーを押した状態から離した時
- keypress … キーを押している状態の時
一度に全てを覚えるのは大変なので、よく使用するものから順に覚えていくといいでしょう。
“change”イベントで処理を実行する
フォームの選択状態や入力内容が変化した際に、動作を管理するためによく使われるのが 「change」 イベントです。
例えば、ラジオボタンがチェックされた時や、テキストフィールドに文字列が入力された後などに、イベントが発火します。
以下のサンプルコードを見てみましょう。
【HTMLのサンプルコード】
<form name="sampleForm">
<input name="textField" type="text">
</form>【JavaScriptのサンプルコード】
const form = document.forms.sampleForm;
form.textField.addEventListener('change', () => {
console.log('入力されました！');
});フォーム内のテキストフィールドに対し、addEventListenerメソッドを使って 「change」 イベントを追加しています。
これにより、テキストフィールドに文字列を入力するか、或いは入力済みの文字列を削除した後、フィールドからフォーカスが外れると関数が実行されるようになります。
なお、changeイベントの対象にできる要素は、input要素・select要素・textarea要素の３つになります。
“keydown”/”keyup”イベントで処理を実行する
続いて、キーボード入力に関してよく使用されるイベントに、 「keydown」 イベントと 「keyup」 があるので、使い方についてご紹介します。
keydownイベントはキーボードのキーを押した時、keyupイベントは押した状態から離した時に発動するイベントになります。
以下のサンプルコードを見てみましょう。
【HTMLのサンプルコード】
<textarea id="textArea"></textarea>【JavaScriptのサンプルコード】
const textArea = document.getElementById('textArea');
textArea.addEventListener('keydown', () => {
console.log('キーが押されました');
});上記の例の場合は、キーが押された際にコンソールにメッセージが表示されます。
イベント名を keyup に変更すると、離した際に関数が実行されるようになります。
“DOMContentLoaded”イベントで処理を実行する
続いては、ページの読み込み完了時に発火するイベントについて解説します。
読み込み完了時に使用するイベントは主に、「load」 イベントと 「DOMContentLoaded」 の2種類があります。
どちらもページの読み込みに関するイベントですが、発火タイミングがそれぞれ異なります。
loadイベントは、DOMツリーの読み込みを行った後、画像やCSSなどの外部ファイルまで全て読み込みが完了した段階でイベントが発火します。
一方、DOMContentLoadedイベントは、DOMの読み込みが完了した段階で発火されるため、loadイベントよりも早く関数が実行されます。
DOMContentLoadedイベントの場合は、Documentオブジェクトに対してイベントリスナーを追加します。
【サンプルコード】
document.addEventListener('DOMContentLoaded', () => {
console.log('ページが読み込まれました！');
});DOMContentLoadedイベントはDOMツリーの読み込みが完了すると、その時点で画像などの読み込みを待たずに関数が実行されるため、全てのリソースが揃ってから処理を行いたい場合には代わりにloadイベントを使用するようにしましょう。
1つの要素に複数のイベント処理を追加する
addEventListenerメソッドには、１つの要素に対して同じイベントの処理を複数登録できるという特徴があります。
JavaScriptでイベントを登録する方法には、「onclick」 といったように、on~の付く形式のイベントハンドラで記述する方法もありますが、この場合は同じイベントの処理を複数登録することはできません。
例えば以下のように、onclickイベントを１つの要素に複数登録しようとした場合に、実行されるのは２つ目に登録した関数のみとなります。
【サンプルコード】
const button = document.getElementById('btn');
button.onclick = function() {
console.log('１回目の登録');
};
button.onclick = function(){
console.log('２回目の登録');
};一方、addEventListenerメソッドを使用すると、どちらのイベントリスナーも同じ要素に登録することができます。
複数登録した際の関数の実行順は、イベントリスナーの登録順に準拠します。
まとめ
ここまで、addEventListenerメソッドの使い方について解説してきました。
Webサイトを作成する上で、イベント処理は必ず必要になる機能の１つです。
しっかりと使い方をマスターして、開発に役立てていきましょう。
関連記事
- JavaScriptとは？初心者向けにできることや基本的な書き方を解説
- JavaScriptが初心者におススメな理由を現役プログラマーが解説
- 【JavaScript入門】簡単なサンプルコードを実行して習得
- 【JavaScript入門】getElementByIdの使い方をわかりやすく徹底解説
- 【JavaScript入門】forEachメソッドで配列の各要素に処理を繰り返す！使い方から注意点まで徹底解説
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
