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) と記述してイベントオブジェクトの内容を把握することができます。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

実際に書いてみよう

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

今回は、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サービス開発を学べます。

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する