現在次のようにイベントハンドラを設定しているのですが、これを一回だけ呼び出されるようにするにはどうするとよいでしょうか?
let elem = document.querySelector('...');
elem.addEventListener('click', e => {
...
});
単純に考えれば、最初にイベントが発火したときにイベントハンドラ自身を削除することで実現可能です。イベントハンドラ内部で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という行です)、アプリのターゲットも考慮してご自身で調査されることをおすすめします。