JavaScriptで要素のクリック時に処理を追加する「click」イベントの使い方

「click」イベントの使い方

要素のクリック時に処理を追加したい場合は「click」イベントを使います。

clickイベントは、要素のクリック時。タップ時に発生します。

イベント

イベント発生条件
click要素のクリック
clickイベント

サンプルコード

サンプルコードとして、ボタンをクリックするとアラートダイアログボックスを表示するスクリプトを紹介します。

Output
Pug
button#button.mb-4 Button
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 targetEvent = document.getElementById('button');
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
const onClickOption = {
	capture: true,
	once: false,
	passive: true
};
targetEvent.addEventListener('click', onClickAction, onClickOption);

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

コメントを残す