https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-dispatchevent-new-event-methods-to-manually-fire-arbitrary-events-for-specific-elements-in-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-dispatchevent-new-event-methods-to-manually-fire-arbitrary-events-for-specific-elements-in-javascript/

JavaScriptで特定の要素に対して任意のイベントを手動で発火させるdispatchEvent()・new Event()メソッドの使い方

イベントを手動で発火させる

JavaScriptでは、イベントに関数などを紐付けて処理を開発します。このイベントは、基本的にユーザーの操作を起因とするものです。

つまり、ユーザーにアクション(clickなど)を取ってもらわないとイベントは発火しません。

しかし、dispatchEvent()new Event()メソッドを駆使することで、ユーザーのアクションを待たずとも特定の要素に対して特定のイベントを発火させることが可能です。

メソッド

メソッド意味返り値
イベントターゲット.dispatchEvent(イベント)イベントを発生させる真偽値
new Event(‘イベント名, [{オプション}[省略可能])イベントを生成するイベント
イベントを手動で発火させるイベント

サンプルコード

サンプルコードでは、本来ならボタンをクリックしないといけないのに、ページ読み込み5秒後に1度だけ自動で処理が行われるスクリプトを紹介します。

自動でグラデーションが変化する挙動をご確認ください。

Output
Pug
button#button.mb-4 Button
 div#rectangle
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);
	}
}

#rectangle {
	width: 100%;
  height: 150px;
  --start: hsl(0, 100%, 50%);
  --end: hsl(180, 100%, 50%);
  background-image: linear-gradient(-90deg, var(--start), var(--end));
}
JavaScript
/** 長方形 */
const rectangle = document.getElementById('rectangle');

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

/** ボタンをクリックする度に、長方形のグラデーション色を変える */
function onClickAction() {
  // 0~359の間のランダムな数を取得する
  const randomValue = Math.trunc( Math.random() * 360 );
  // グラデーションの開始色と終了色を決定
  const randomColorStart = `hsl(${randomValue}, 100%, 50%)`; //取得したカラーコード
  const randomColorEnd = `hsl(${randomValue + 180}, 100%, 50%)`; //取得したカラーコードの補色

  // 長方形のグラデーションのための変数(--startと--end)を変更
  rectangle.style.setProperty('--start', randomColorStart);
  rectangle.style.setProperty('--end', randomColorEnd);
}

//ページ読み込み後に1度だけボタンを押してなくても処理を実行する
setTimeout(() => {
	document.getElementById('button').dispatchEvent( new Event('click') );
}, 5000);
インストラクター
コメント

コメントを残す