https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/what-are-javascript-events/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/what-are-javascript-events/

JavaScriptの「イベント」とは何か?

JavaScriptの「イベント」とは何か?

ウェブサイトには「イベント」があります。例えば、クリック・タッチ・スクロール・画像の読みこみ・ページの読み込みなど、実は意識していないあらゆる動作が「イベント」です。

高度な開発を続けていく内に、上記の様なタイミングで何か処理をしたいタイミングが出てきます。

この各種「イベント」に対して処理を実装する仕組みがJavaScriptには備わっています。

addEventListener()メソッドを利用すれば、各種イベントに処理を追加することができます。

イベントへの処理の追加例

簡単なイベント例をサンプルコードにしたがって説明します。

Output
Pug
 button#button.mb-4 Button
 div#pushalert
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const pushAlert = document.getElementById('pushalert');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックするとアラートを表示 */
function onClickAction() {
	//アラートを表示
	const dateInstance = new Date();
	window.alert(`こんにちは!今日の日付は${dateInstance.getFullYear()}年${dateInstance.getMonth() + 1}月${dateInstance.getDate()}日です。`);
}

これは<button>を押したタイミングでアラートダイアログボックスを表示するスクリプトです。

イベントターゲットとは?

<button>要素にはクリップ・タップなど様々なイベントが発生します。この様なイベントを発生させるオブジェクトのことを「イベントターゲット」と良います。<button>タグもそうですが、他に<a>タグ・window<div>タグ・<p>タグなどもイベントターゲットです。

イベントターゲットはdocument.getElementById('button')などの様にID属性を指定して取得することが一般的です。

イベントリスナーとは?

メソッド意味
イベントターゲット.addEventListener(イベント名c,リスナー.[オプション])イベントリスナーの設定(イベントへの処理の追加)

このサンプルでは、clickイベントに対して処理を行いました。

addEventListener('click', onClickAction);の部分がそれに該当します。

また、この時に実行される処理のことを「イベントリスナー」と良います。

このサンプルでの「イベントリスナー」は関数onClickActionです。

全体を説明

まとめると、document.getElementById('button').addEventListener('click', onClickAction);というコードは「ID属性buttonがついた要素のイベントclickに対して、イベントリスナーonClickActionを追加」しているのです。

インストラクター
コメント

コメントを残す