スライドショー

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

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

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

この記事では、

  • 「addEventListener()」とは?
  • 「addEventListener()」の使い方
  • 主要なイベントリスナー
  • イベント処理の上書きについて

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

addEventListener()とは?

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

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

  • Webページが読み込まれたかどうか?
  • マウスによるクリックがされたかどうか?
  • フォームに何らかの操作が行われたかどうか?
  • キーボードから入力が行われたかどうか?

etc…

これらの状態を監視しながら、自分が想定したイベントが発生した時に「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()」について学習しました!

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

  • addEventListener()は3種類の記述方法がある
  • イベントの種類に応じてさまざまな処理を関数で実行できる
  • addEventListener()はイベントを上書きせずに複数同時に実行可能

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説