JavaScriptのイベント処理を学ぶ！基礎をしっかり抑えよう！

2022.03.10

悩んでいる人

JavaScriptでイベント処理という言葉を聞くけどよくわからない

悩んでいる人

JavaScriptでイベント処理ってどんなのがあるんだっけ？

本記事では上記の悩みを解決します。

本記事で分かること

ボタンをクリックしたときに、別のボタンをクリックできるようになる
JavaScriptのclickメソッドが分かる

オカ

JavaScriptを記述するとき、僕も毎回調べている気がするのでいい加減まとめようと思って…。

JavaScriptにおけるイベントとは？

クリックやホバーなどのブラウザを操作すること = イベントという理解でいいかと思います。

フロントエンドでは、どんなときに、何が起こるのかをJavaScriptで組み込んでいきます。

イベントの登録/キャンセル/伝播など

イベントの登録

イベントは、addEventListener()で登録することができます。

const button = document.getElementById("button")

button.addEventListener("click", function(){
  alert("ボタンが押されたよー！")
})

	型	内容（コールバック関数）	必須
第一引数	文字列	イベント名	必須
第二引数	関数	イベントハンドラー（イベントリスナー）	必須
第三引数	真偽	オプション	任意

イベントのキャンセル

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

const button = document.querySelector(".js-event-stop");
button.addEventListener("click", function(event) {
	console.log( "クリックされました / Before" );
  event.preventDefault();
	console.log( "クリックされました / After" );
});

aタグのhref属性で通常であれば別のページに遷移します。（赤いボタン）

ですが、event.preventDefault();によってイベントのデフォルトの動作をキャンセルすることができます。（赤いボタン）

イベントの伝播（バブリング）

青色のエリアをクリックすると、アラートで”イナー”と表示されたあとに、”アウター”と表示されます。

これをバブリングといいます。

<div class="outer" id="js-outer">
  <div class="inner" id="js-inner"></div>
</div>

const outerButton = document.getElementById("js-outer");
outerButton.addEventListener("click", () => {
 alert("アウター");
});

const innerButton = document.getElementById("js-inner");
innerButton.addEventListener("click", () => {
  alert("イナー");
});

バブリングとは、要素上でイベントが起こると、まずそのイベントが起こり、次に親の要素のイベント起こることをいいます。

内部の要素から、親の要素に”バブル”していることが名前の由来のようです。

※バブリングをとめるには、event.stopPropagation()メソッドを使います。
参考：https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

const outerButton = document.getElementById("js-outer");
outerButton.addEventListener("click", () => {
 alert("アウター");
});

const innerButton = document.getElementById("js-inner");
innerButton.addEventListener("click", () => {
  alert("イナー");
  event.stopPropagation()
});

コールバック関数を外だしする

コールバック関数は外だしが可能です。

const buttonRed = document.querySelector(".js-button1");
const buttonBlue = document.querySelector(".js-button2");

// 無名関数
buttonRed.addEventListener("click", function () {
  alert("赤色のボタンがクリックされたよー！");
});

// 関数
buttonBlue.addEventListener("click", buttonClick);
function buttonClick() {
  alert("青色のボタンがクリックされたよー！");
}

外に出した場合には、関数には()はつけないようにしましょう！

■OK
buttonBlue.addEventListener("click", buttonClick);

■NG
buttonBlue.addEventListener("click", buttonClick());

要素を取得する(event, this)

クリック時にどの要素がクリックされたかを取得する際には、event.targetを使う方法と、thisを使う方法があります。

どちらも同じ要素を取得することができます。

buttonRed.addEventListener("click", function (event) {
  console.log(event.target);
  console.log(this);
});

オカ

この辺はもう少し詳しく僕も理解したいので、
別記事でまとめる予定です…！

よくあるイベントについて

クリック

これはよく使うイベントですね。先程までの例でも使っておりました。

const buttonRed = document.querySelector(".js-button1");

buttonRed.addEventListener("click", function (event) {
  console.log("クリックされました！");
});

スクロール

windowオブジェクトに対して、scrollイベントを付与します。

下記のようなコードを書くと、スクロールをするたびにログにスクロールされたーーー！が出力されます。

window.addEventListener("scroll", function () {
  console.log("スクロールされたーーー！");
});

よくあるところでいうと、スクロールしたときの高さを取得したりするときに使いますね。

高さを取得するときには、window.scrollYもしくはwindow.pageYOffsetで取得可能です。

window.addEventListener("scroll", function (event) {
  console.log(window.pageYOffset);
  console.log(window.scrollY);
});

オカ

window.scrollYとwindow.pageYOffsetの違いがよくわかりませんが、window.pageYOffsetのほうがIEも対応しているらしい。

ページの読み込み

window.addEventListener("DOMContentLoaded", function () {
  console.log("DOMContentLoadedの読み込みが完了しました！");
});

window.addEventListener("load", function () {
  console.log("loadの読み込みが完了しました！");
});

ページの読み込みには、DOMContentLoadedとloadの2種類があります。

DOMContentLoadedとloadの違い

DOMContentLoaded・・・HTMLの読み込みが終わったとき
load・・・ページ全体の読み込みが終わったとき

考える人

ということはloadのほうが発火が遅いのかな…？

オカ

そのとおりです！DOMContentLoadedはHTMLの解析が終わった段階なので、まだCSSや画像が読み込まれていなくても、このJSを読み込むよとなります。

windowオブジェクトとdocumentオブジェクトについて

windowオブジェクトが最上位に位置しており、下位にDocumentオブジェクトやEventオブジェクト等のいろいろなオブジェクトが存在します。下記のようにconsole.log(window)で中身を見てみると、Documentオブジェクトも格納されているのが分かりますね。

本来であれば、window.document.addEventListener(~~~~~)と記述するですが、window部分は省略可能となっており一般的に省略して記述されております。

consoleプロパティやalertプロパティも同様です。

    window.addEventListener("load",function(){
      console.log(window);
    })

マウスホバー

マウスが要素に重なっているとき、離れたときの処理を記述することで表現可能です。

下記のコードは、タイトルにマウスが重なったときに画像が表示され、タイトルからマウスが離れたときに画像が非表示になります。

const title = document.querySelector(".title");
const image = document.querySelector(".image");

title.addEventListener("mouseover", function () {
  image.style.display = "block";
});
title.addEventListener("mouseout", function () {
  image.style.display = "none";
});