イベントトリガで一回だけ実行する(JavaScript)

やりたいこと

JavaScriptでイベントをトリガにして処理を行う場合、addEventListenerを使用しますが、１度だけしか実行したくないときがあります。（準備が終わったイベントで初期化とか）

removeEventListenerを使用すればいいのですが、全く同じlistenerを設定しなければならず厄介です。（メンテでしくったり）

この記事ではremoveEventListenerを使用せずに１回のみ処理を行う方法を紹介します。

実装

通常addEventListenerは以下のように記述すると思います。

element.addEventListener(event, callback);
// example
// element.addEventListener("click", ()=>{console.log("clicked")});

この実装だとイベントが来るたびにcallbackが実行されます。

この実装を以下のように修正します。

element.addEventListener(event, callback, {once: true});

修正前の第３引数がtrueの場合

以下のようになります。

修正前

element.addEventListener(event, callback, true);

修正後

element.addEventListener(event, callback, {once: true, capture :true});

結果

addEventListenerで設定したListenerが一度のみ実行されるようになりました。

参考にさせていただいたサイト

EventTarget: addEventListener() メソッド - Web API | MDN

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

developer.mozilla.org