【JavaScript入門】addEventListener()によるイベント処理の使い方！

こんにちは、ライターのマサトです！

今回は、JavaScriptでさまざまなイベント処理を実行することが可能な「addEventListener()」について学習していきましょう！

この記事では、

など、基本から応用まで解説していきます。この記事で、「addEventListener()」をしっかり学習して自分のスキルアップを目指しましょう！

addEventListener()とは？

それでは、まず最初に基本的な前提知識から学習を始めていきましょう！　「addEventListener()」は、JavaScriptからさまざまなイベント処理を実行することができるメソッドになります。

では、ここで言う「イベント処理」とはどのようなことを指すのでしょうか？Webサイトを構成するページ内では、以下のようにさまざまなイベントが発生するのです。

これらの状態を監視しながら、自分が想定したイベントが発生した時に「addEventListener()」を利用して処理を行うわけです。本記事では、基本的な使い方からさまざまなイベント処理の実行方法を解説するので、ぜひ参考にして見てください！

「addEventListener()」の使い方

この章では、基本的な使い方から実際にプログラムするための手法について見ていきましょう！一般的な構文からさまざまな記述方法およびイベント処理の実行方法について学んでいきます。

基本的な構文と書き方について

まずは、基本となる「addEventListener()」の構文について見ていきましょう！一般的には、イベントの「種類」と処理を実行するための「関数」を指定することになります。

対象要素.addEventListener( 種類, 関数, false )

第1引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定します。

第2引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行できるわけです。

第3引数は、イベント伝搬の方式を「true / false」で指定するのですが通常はfalseを指定しておきましょう。

3種類の関数設定方法について

「addEventListener()」を記述する方法として、3種類の関数を設定する書き方があるのでまとめて解説をしておきます！　1つ目は、外部の関数を設定する方法です。

対象要素.addEventListener(種類, sampleEvent, false);


function sampleEvent() {
  
  //ここに処理を記述する
  
}

この方法は、「sampleEvent()」という関数をイベント処理の外側で定義しているのがポイントです。関数内の処理が複雑であったり、ファイルが複数に分割されている場合などに使われるのが一般的です。

2つ目は、無名関数を設定する方法です。

対象要素.addEventListener(種類, function() {
  
  //ここに処理を記述する
  
}, false);

この方法が一般的によく使われる書き方になるでしょう。特徴としては、第2引数へそのまま関数を記述しているのがポイントです。単純な処理しか記述しないようなケースでは、関数を別で用意するよりもコードが分かりやすくなります。

3つ目は、アロー関数を設定する方法です。

対象要素.addEventListener(種類, () => {
  
  //ここに処理を記述する
  
});

こちらは、先ほどの無名関数をES2015の書き方にしたパターンなので、特徴的には同じになります。

「click」によるクリックイベント処理の作り方

それでは、実際にイベント処理をプログラミングしてみましょう！まずは、次のようなボタン要素を用意します。

<button id="btn">表示</button>

このボタンをクリックしたら、イベント処理が発動して関数が実行されるようにしてみましょう！次のサンプル例を見てください！

var btn = document.getElementById('btn');


btn.addEventListener('click', function() {
  
    console.log('クリックされました！');
  
}, false);

この例では、HTMLのボタン要素をまずは取得してその要素に対してaddEventListener()を実行しています。これにより、ボタン要素をクリックしたら設定されている関数が実行されるようになるわけです。今回の例だと、クリックしたあとにコンソールへ文字列が出力されます。

主要なイベントリスナー

この章では、「イベントの種類」に設定できる主要なイベントを解説していきいます。一般的によく使われるイベントにどのようなものがあるのかや、それぞれの詳しい使い方について学んでいきいます。

イベントリスナーの一覧表

まずは、「addEventListener()」でよく使われる主要なイベントの種類について見ていきましょう！　イベントの種類は非常にたくさん用意されていますが、一般的には以下の表にあるものがよく使われます。

イベント種類	内容
load	Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）
DOMContentLoaded	Webページが読み込みが完了した時に発動（画像などのリソースは含まない）
click	マウスボタンをクリックした時に発動
mousedown	マウスボタンを押している時に発動
mouseup	マウスボタンを離したときに発動
mousemove	マウスカーソルが移動した時に発動
keydown	キーボードのキーを押したときに発動
keyup	キーボードのキーを離したときに発動
keypress	キーボードのキーを押している時に発動
change	フォーム部品の状態が変更された時に発動
submmit	フォームのsubmitボタンを押したときに発動
scroll	画面がスクロールした時に発動

この表にある「イベントの種類」は、addEventListener()の第1引数に設定できるものになります。

「change」によるイベント処理

フォーム部品の状態を管理するときによく使われるイベント種類として「change」があるのでご紹介しておきます。「change」は、例えばラジオボタンがチェックされた時や文字列が入力されたあとなどにイベントが発動します。

例えば、次のようなフォームがあるとします。

<form name="myform">

      <input name="sample" type="text">

</form>

この例は、単純な入力ボックスが1つだけ配置されています。そこで、この入力ボックスの状態が変化した時にイベントを発動させる処理を作ってみましょう！

var form = document.forms.myform;

form.sample.addEventListener('change', function() {
  
    console.log('状態が変化しました！');
  
}, false);

フォーム部品のname属性は「document.forms」から取得できるので、まずは入力ボックスの要素を取得します。そこにaddEventListener()を使って「change」イベントを実行しているのが分かりますね。

これにより、入力ボックスに何か文字列を入力してフォーカスを外すとコンソールに指定した文字列が出力されます。

「keydown / keyup」によるイベント処理

次に、キーボードのキー入力に関するイベントとして「keydown / keyup」があるのでご紹介します。これはキーボードの「キー」を押したときや離した時に発動するイベントになります。次のサンプル例を見てください！

window.addEventListener('keydown', function(event) {
  
  console.log(event.keyCode);
  
});

この例は、キーボードのキーを押すとそのキーに割り当てられている「キーコード」をコンソールに出力します。これは、関数の引数でイベントオブジェクトを使って「keyCode」プロパティから取得できます。

「DOMContentLoaded」によるイベント処理

今度は、Webページが読み込まれた瞬間に発動するイベント処理について見ていきましょう！　よく使われるイベント種類としては、「load」「DOMContentLoaded」の2種類があります。「load」はWebページを構成する画像などのリソースがすべて読み込まれた時点で発動します。

しかし、「DOMContentLoaded」はHTMLを構成するDOMが形成された瞬間に発動するので高速なのです。次のサンプル例を見てください！

window.addEventListener('DOMContentLoaded', function() {
  
    console.log('ページが読み込まれました！');
  
});

この例は、Webページが読み込まれてすぐにコンソールへ文字列が出力されます。例えば、JavaScriptから何らかのHTML要素を制御するようなケースで、すぐに実行したい場合などに有効でしょう。

逆に、画像のサイズを取得するなどリソースを必要とする場合には「load」を使うようにしましょう！

イベント処理の上書きについて

これまで「addEventListener()」の使い方について学んできましたが、実は大きな特徴が1つあります。それは、イベント処理が上書きされないということです！

つまり、addEventListener()を使ったイベント処理は、複数のイベントを追加することで同時に実行できるわけです。これを証明するために、2つの簡単な関数を用意しました。

function sampleEvent() {
 
  console.log('sampleEventが実行されました');
  
}

function newEvent() {
 
  console.log('newEventが実行されました');
  
}

どちらの関数も文字列をコンソールに出力するだけのシンプルな構造です。そこで、「sampleEvent()」をHTML要素に「onclick属性」を使って実行してみましょう。

<button id="btn" onclick="sampleEvent()">ボタン</button>

この状態で実行すれば、当然ですが「sampleEvent()」が実行されますよね？しかし、次のように記述するとどうなるでしょうか？

var btn = document.getElementById('btn');

btn.onclick = newEvent;

この例では、JavaScript側で「onclick属性」にnewEvent()を実行するように再設定しています。そのため、実行するとイベント処理が上書きされて「newEvent()」だけが実行されるわけです。そこで、まったく同じことを「addEventListener()」で再現するとどうなるでしょうか？

var btn = document.getElementById('btn');

btn.addEventListener('click', sampleEvent);

btn.addEventListener('click', newEvent);

実行結果

sampleEventが実行されました
sampleEventが実行されました
newEventが実行されました

実行結果を見ると、両方の関数が実行されて文字列が出力されているのが分かりますね！　この場合は、addEventListener()に2つの関数が追加されることになるのでどちらも一緒に実行されるのです。

さらに、「onclick属性」で指定したコードも動作しています。このことから、「onclick属性」と「addEventListener()」は別のものであることもわかりますね。

まとめ

今回は、JavaScriptからイベント処理を実行するための「addEventListener()」について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！