JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのaddEventListenerの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• addEventListenerとは
• addEventListenerの使い方
• 検知したイベントに関する情報を取得する
• 実際に書いてみよう
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

JavaScriptのaddEventListenerの使い方について詳しく説明していくね！

お願いします！

addEventListenerとは

Webサイト開発において、「イベント」という概念はとても重要です。

イベントとは、例えば「ユーザーがボタンをクリックする」「ページの読み込みが完了する」など、Webサイトにおいて発生する現象の総合的な名称です。

JavaScriptではこのイベントを検知し、検知したイベントの情報を使ってさまざまな処理ができます。

イベントを検知するための仕組みのことを「イベントリスナ」といい、イベントリスナを定義するためのJavaScriptのメソッドが「addEventListener」（イベントリスナをadd = 追加する）です。

addEventListenerの使い方

addEventListenerは、以下のような文法で使用できます。

イベントを検知する対象要素.addEventListener('イベント名', イベントを検知した時にする処理（関数）, オプション)

「イベントを検知する対象要素」には、さまざまな要素が指定できますが、Web開発でよく使うのはページ全体を表すwindowやdocument、または任意のHTML要素です。

addEventListenerの第一引数には、イベント名が入ります。
“click”（クリック）、”scroll”（スクロール）などが当てはまります。

第二引数には任意の処理を含む関数を指定できます。

第三引数には、より詳細な検知に関する設定を指定できますが、普段から頻繁に使うものではないため、今回は割愛します。

addEventListenerの詳細な仕様が気になる方は、こちらのMDNドキュメントで確認してみてください。

この文法を利用して、「ユーザーがページをスクロールした時」というイベントリスナを定義する場合、以下のように記述します。

//対象要素がページ全体なので、windowを使う
window.addEventListener('scroll', () => {
    console.log("スクロールされました")
})

[PR] コーディングで副業する方法とは

検知したイベントに関する情報を取得する

addEventListenerの第二引数に指定した関数が実行されるとき、引数として1つのオブジェクトが渡されます。

このオブジェクトには、検知したイベントに関するさまざまな情報が格納されています。

実際にコードでイメージをつかみましょう！

window.addEventListener('click', (e) => {
    console.log(`クリックした位置は上から${e.pageY}、左から${e.pageX}です`)
})

サンプルコードでは、ページの任意の箇所をクリックした際に、クリックした場所の座標を表示しています。

ここで登場している “e” が、イベントオブジェクトです。

実はこのeという名前はなんでもよいのですが、一般的にeventの頭文字であるeが広く使われています。

このeに格納されている情報はイベントの種類によって異なるため、実装の際にconsole.log(e) と記述してイベントオブジェクトの内容を把握することができます。

実際に書いてみよう

それでは実際に書いてみましょう。

今回は、3つのボタンのうちどれか1つをクリックした際に、クリックされたボタンの名前を表示するプログラムを書いてみましょう。

<button id="A">ボタンA</button>
<button id="B">ボタンB</button>
<button id="C">ボタンC</button>

//3つのボタンを一括で取得　
const buttons = document.getElementsByTagName('button');

//3回繰り返す処理
for (let i = 0; i < 3; i++) {
    buttons[i].addEventListener('click', (e) => {
        //イベントオブジェクトを参照して、クリックした要素（e.target）のidを取得
        console.log(`押されたのは、ボタン${e.target.id}です。`)
    })
}

ポイントとなるのは、以下の部分です。

    buttons[i].addEventListener('click', (e) => {
        //イベントオブジェクトを参照して、クリックした要素（e.target）のidを取得
        console.log(`押されたのは、ボタン${e.target.id}です。`)
    })

それぞれのボタンに対してaddEventListenerでイベントリスナを定義し、イベントを検知したらイベントオブジェクトから情報を取得して、表示に反映しています。

ボタンAを押せば、「押されたのは、ボタンAです。」と表示されるはずです。

このようにイベントを検知→検知したイベントの情報をもとに処理、という流れはさまざまな場面で応用できます。

本記事を通して、addEventListenerを使いこなせるようになりましょう！

今回は以上です。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！