【初心者向け】何がいつ発火するのか理解できる！addEventListenerの基本的な使い方を解説！

みなさんこんにちは。
ひょっとこなエンジニアの橋本です。

今回はjavascriptにおいて切っても切れないもの、addEventListenerについて解説していきたいと思います。

• javascriptがうまく操れない
• 関数が二重に動いている気がする
• 動かしたい関数がどのタイミングで動くのが適性かわからない

以上のような、javascriptのイロハは分かってきたけど、実行のタイミングなどが良く分からない方におすすめの記事になっています！

株式会社ノベルティはWebプロモーション支援と業務改善支援が得意な千葉県船橋市の制作会社です。

制作実績などの資料ダウンロードはこちら

javascriptの書き方基本

それではまずは、javascriptの書き方の基本についていってみましょう。

サンプルコード

<script>

function testFunc(){
  document.querySelectorAll(".hogehoge").forEach((hoge) => {
     hoge.classList.add("piyo")
  })
}

testFunc()

</script>

このようなソースがあったとします。
こちらはとてもシンプルで、ドキュメント内のhogehogeというクラスのついか要素を取得して、それぞれにpiyoをクラス付与する関数です。

もしもjQueryを使える環境でしたら、$("hoge").addClass("piyo")といった形でも同じ効果を得ることができます。
ちなみに速度的な観点から、はじめに記したコードが推奨です！
詳しくはこちらの記事を見てみてくださいね！

【初心者向け】そろそろしっかり理解したい！ JavaScriptの要素取得(前編)

話が少しそれてしまいましたが、今回の本題は【addEventListener】についてです。
その点に着目すると、このコードにはそれに該当する部分はありませんね。
しかしながらそれでもこのソースをそのまま書けば普通に動いているように見えますし、実際に上記のコードは特に問題なく実行することができます。
じゃあaddEventListenerいらないじゃん！　ということにもなりますが、どうなのでしょう。

addEventListenerとは

それではまず、addEventListenerについておさらいします。

addEventListenerとは、指定した対象に対して設定するもの。特定のイベントが実行されるたびに呼び出される関数や処理を設定することで全体の動きを管理をします。
ですので、実際の用法としては、下記のような形となります。

EventTarget.addEventListener("イベントの種別",function(){})

つまり、clickやscrollなどを指定することで、実行のタイミングを制御することができるわけです。

関数発火のタイミングをコントロールしよう！

具体的には、こちらのソースを見ていきましょう。
ローディング画面を用意して、画面がロードされたらcssのdisplayをnoneしたいとします。

[html]
<div class="loading">LOADING</div>

[javascript]
document.getElementById("hoge").classList.add("done")

このようなソースががあるとして、そのまま実行すればロードを待つことなく一瞬にしてローディング画面が消えます。
※ロードは、ドキュメントや画像などがすべて読み込まれて、ユーザーがきれいな状態で画面を閲覧できる状態です。

setTimeout(function() {
   document.getElementById("hoge").classList.add("done")
}, 5000);

では、それを回避するために5秒後にローディング画面を消すようにします。
しっかりと考えて制作を進めていればページをロードするのに5秒もかからないでしょう。つまりこちらを使えば、ロードが終わってから画面を表示すると言う要件を満たすことはできます。
ただし、ロード画面が終わる時間＝ローディング画面が消えるわけではないので、ユーザーは絶対に5秒も待たなければいけません。

そんなときに役立つのがaddEventListenerです！

window.addEventListener('load', function(){

  document.getElementById("hoge").classList.add("done")
});

このような形で記載すると、ロードが終わったらローディング画面が消える演出を正しく作ることが可能になります。

よく使うEvent①(click)

ボタンを押したらアラートを出したい、といった場合も同じようにaddEventListenerを利用します。

document.querySelectorAll(".hogehoge").forEach((hoge) => {
  hoge.addEventListener('click', function(e){
    e.target.classList.add("done")
  });
}

こちらのソースは、ドキュメント内に存在するhogehogeというクラスすべてにクリックイベントを仕込みます。クリックされたら、クリックした要素に対してdoneというクラスを付与する仕組みです。

この時に着目していただきたいのは、addEventListenerはイベント(例ではe)を持てることです。
こちらを利用することで、クリックされた要素に対して何か処理を入れることが容易となります。
今回の例でいうと、e.targetですね！

もう一つ注意点として、クリックイベントはクリック対象に対して付与するものなので、addEventListenerの対象は明確に指定(例のhoge)しましょう。

よく使うEvent②(scroll)

クリックと同様、使う頻度が高めなものとしてスクロールが挙げられます。

処理が多重になることによる重さだったり、最近ではIntersection Observerの台頭によって出番が少なめになってしまっているかもしれませんが、要件によっては使います！

window.addEventListener('scroll', function(){
    //処理を記載
});

実際の例については、こちらの記事をご参考いただければ幸いです。

【初心者向け】【コピペでOK】JavaScriptで最高頻度!?　スクロールでクラス付与!

ポイントはwindowに対してイベントを仕込んでいること。clickやloadのときのソースと比較すると違いが分かるかなと思います。イベントを仕込む際は対象を誤らないことが大切になる、ということですね！

まとめ

今回はaddEventListenerの基本的な使い方について、ご紹介させていただきました！

まだまだたくさんあったり、つまずくところはたくさんあるaddEventListenerですが、今後も少しずつご紹介させていただきますので、学習していきましょう！

それではまた！

株式会社ノベルティはWebプロモーション支援と業務改善支援が得意な千葉県船橋市の制作会社です。

制作実績などの資料ダウンロードはこちら

↓ この記事をご覧の方へおすすめの記事はこちら ↓

【初心者向け】こんがらがると大変！　jQueryを共存させる$.noConflict()について学ぶ！(前編)