一度限りのイベントハンドラーを作成する

要素のイベントにイベントハンドラーを追加するためにaddEventListener()メソッドを使用すると、イベントが発生するたびにイベントハンドラーが実行されます。

一度だけ実行される一度限りのイベントハンドラーを作成するには、addEventListener()メソッドの3番目のパラメーターを使用します。

element.addEventListener(type,handler,{once: true});Code language: CSS (css)

addEventListener()メソッドの3番目のパラメーターは、onceプロパティを持つオブジェクトです。trueに設定すると、イベントハンドラーは一度だけ実行されます。

次の例は、一度限りのイベントハンドラーを作成する方法を示しています。クラス.btnを持つボタンがあるとします。

<button class="btn">Subscribe</button>Code language: HTML, XML (xml)

次のコードは、ボタンのクリックイベントに一度限りのイベントハンドラーを追加します。

const btn = document.querySelector('.btn');

btn.addEventListener('click', function (e) {
  alert('Subscribed!');
}, {
  once: true
});Code language: JavaScript (javascript)

ボタンをクリックすると、アラートダイアログが一度だけ表示されます。