千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.05.31

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

橋本大地

JavaScript

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

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

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

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

目次

javascriptの書き方基本

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

サンプルコード

<script>

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

testFunc()

</script>

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

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

話が少しそれてしまいましたが、今回の本題は【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(){
    //処理を記載
});

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

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

まとめ

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

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

それではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | 【初心者向け】何がいつ発火する! addEventListenerの基本的な使い方を解説!
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪