1

現在次のようにイベントハンドラを設定しているのですが、これを一回だけ呼び出されるようにするにはどうするとよいでしょうか?

let elem = document.querySelector('...');
elem.addEventListener('click', e => {
  ...
});

1 件の回答 1

2

単純に考えれば、最初にイベントが発火したときにイベントハンドラ自身を削除することで実現可能です。イベントハンドラ内部でremoveEventListenerを呼べばいいかと思います。ヘルパーを作ればこんなかんじです。

const addOnceEventListener = function (el, evt, listener, capture) {
    capture = !!capture;
    const __listener = function () {
        listener.apply(this, arguments);
        el.removeEventListener(evt, __listener, capture);
    };
    el.addEventListener(evt, __listener, capture);
};

// for example
addOnceEventListener(elem, 'click', e => console.log(e));

ただし第三引数は比較的新しいブラウザの実装ではcaptureでなくoptionsを受け付けて、ここにはonceというパラメータがあります。こちらを使えば一度きりのイベントハンドラをヘルパーなしで登録できます。

 elem.addEventListener('click', e => {
     ...
 }, { once: true });

互換性については同MDNに情報もありますが(once value in the options parameterという行です)、アプリのターゲットも考慮してご自身で調査されることをおすすめします。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。