32788


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

[code]

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


CC BY-SA 3.0
2017-02-19T02:31:04.887
32783
2017-02-19T07:00:27.727
20718
question
javascript dom
一度だけ呼び出されるイベントハンドラを設定するには？


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

[code]

    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));
    
[/code]

ただし第三引数は _比較的新しい_
ブラウザの実装では`capture`でなく[`options`](https://developer.mozilla.org/en-
US/docs/Web/API/EventTarget/addEventListener#Parameters)を受け付けて、ここには`once`というパラメータがあります。こちらを使えば一度きりのイベントハンドラをヘルパーなしで登録できます。

[code]

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

互換性については[同MDNに情報もありますが( _once value in the options parameter_
という行です)](https://developer.mozilla.org/en-
US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility)、アプリのターゲットも考慮してご自身で調査されることをおすすめします。


CC BY-SA 3.0
2017-02-19T06:44:04.733
32788
2017-02-19T07:00:27.727
2017-02-19T07:00:27.727
32783
answer