JavaScriptでイベント発生時に呼び出す関数にイベントの情報を渡す仕組みを理解する

イベント情報の受け渡し

イベント発生時に呼び出される関数に対して、引数としてイベントの情報を渡すことができます。

イベント情報はイベントオブジェクトに格納されます。

イベントターゲットの種類によってイベントオブジェクトに格納される値は異なりますが、大まかには、イベントが発生した要素や押されたキーなどの情報が含まれています。

サンプルコード

ここでは、イベントが発生した時のイベントオブジェクトから、clickイベントが発生した要素を参照し、クラス名を出力する関数を紹介します。

Output
イベントオブジェクトの参照
Pug
div イベントオブジェクトの参照してクラス名を出力
	button#button.mb-4.text-center ボタン
	#targetText
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.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 targetText = document.getElementById( 'targetText' );
document.getElementById('button').addEventListener('click', ( event ) => {
	targetText.textContent = event.target.className;
});
インストラクター
コメント

コメントを残す