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

初心者向けにJavaScriptのaddEventListenerの使い方について現役エンジニアが解説しています。addEventListenerとは、イベントに合わせて実行させる関数を登録するためのメソッドです。今回はaddEventListenerを使ってクリックするたびに数値が増えるサンプルを作成します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのaddEventListenerの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

addEventListenerとは

addEventListenerとは、イベントリスナー(イベントに合わせて実行させる関数)を登録するためのメソッドです。ブラウザ上では、クリックやマウスホバー、キーボード入力など様々なイベントが発生します。addEventListenerで、イベントリスナーを追加することで発生したイベントに応じて指定した関数を実行させることができます。

例えば、キーボード入力があるたびにフォームの内容を確認したり、送信前にアラートを出したり、イベントに応じてHTMLを書き換えるといったことが可能です。

addEventListenerの使い方

addEventListenerは、イベントの種類とそのイベントが発生した時に実行する関数の2つが基本的に使用するものです。
要素に対して使用し、クリックイベントを第1引数に指定すれば、クリックした時に登録した関数が実行されます。

要素.addEventListener(イベント, 関数, オプション);

オプションでは、キャプチャフェーズで実行させるのかバブリングフェーズで実行させるのかを指定できます。クリックなどイベントが発生すると、ルート要素()から発生した要素を探していき、ターゲットの要素を検出します。 そのあとルート要素まで遡る形でイベントが伝播していきます。

ルート要素からターゲットを検出するまでをキャプチャフェーズ、ターゲット要素からルートに遡るまでをバブリングフェーズと言います。

addEventListenerのオプションはfalseで、子要素から親要素に向かってイベントが伝播します。もし、親要素のイベントを先に拾う場合には、オプションをtrueにしましょう。イベントを伝播させたくない場合は、stopPropagationメソッドでイベントの伝播を防ぐことができます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。今回はクリックするたびに数値が増えていくカウンターを書いてみます。まずはidを持つdivを作ります。初期値は0にします。

<div id="counter">0</div>

JavaScriptでdivがクリックされた時に実行する関数を書き、addEventListenerで追加していきます。

// 要素を取得
const counter = document.getElementById("counter");

const addCount = () => {
 //文字列を数値に変換
 let num = parseInt(counter.textContent, 10);
 //1追加する
 counter.textContent = num + 1;
};

//addEventListenerで登録
counter.addEventListener("click", addCount);

クリックするたびに数値が増えていくはずです。以上で解説を終わります。

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。