1度だけのイベントリスナーを設定する

1度だけのイベントリスナーを登録する

addEventListenerメソッドは第3パラメータのオプションでonceをtrueにすると、1度だけ実行するように設定することができます。

以下の例では、id属性が「btn_once」のHTML要素に対して1度だけのイベントリスナーを設定し、クリックされたら1度だけ処理を実行するように指定しています。

コード例

document.addEventListener('DOMContentLoaded',()=>{

	const btn = document.getElementById("btn_once");
	btn.addEventListener('click', (e) => {

		e.preventDefault();
		console.log("test");

	}, {
		'once': true // 1度だけのイベントリスナーにするオプション
	});
});

上記のコードを実行すると、btn_onceのHTML要素を2回以上クリックしてもconsole.logメソッドは1度しか実行されません。

1度だけのイベントリスナーで連続して発生するイベントを拾わないようにする

1度だけのイベントリスナーを活用することで、ボタンを何度も続けてクリックされてしまったときなどに発生する複数のイベントを未然に防ぐことができます。
例えば、ボタンを押したらAjaxによるデータ送信が発生するような場合、ボタンを連続して何度も押すと押した回数だけ通信が発生してしまいますが、そのような多重送信を防ぐことができるようになります。

以下の例ではid属性が「btn_once」のHTML要素に対して、クリックしたら1度だけsendData関数を実行するようにイベントリスナーを設定します。
そしてAjaxが完了した後に、1度だけのイベントリスナーを再設定することで、Ajaxの実行途中で多重送信されることを防ぎます。

コード例

document.addEventListener('DOMContentLoaded',()=>{

	const btn = document.getElementById("btn_once");
	btn.addEventListener('click', (e) => {

    	e.preventDefault();
		sendData();

	}, {
		'once': true // 1度だけのイベントリスナーにするオプション
	});
});


const sendData = ()=>{

	// 送信するデータ
	data = [];

	fetch( '/test/url', {
		method: 'POST',
		body: data
	}).then(function(res){

		if(res.ok) {

			res.json().then(data=> {

				if( data.result ) {

					// Ajax後の処理
				}

			});
		}

		// Ajax完了後に1度だけのイベントリスナーを再設定する
		document.addEventListener('DOMContentLoaded',()=>{

			const btn = document.getElementById("btn_once");
			btn.addEventListener('click', (e) => {

				e.preventDefault();
				sendData();

			}, {
				'once': true // 1度だけのイベントリスナーにするオプション
			});
		});
	});

});

以上、1度だけのイベントリスナーを設定する方法についてでした。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。