[解決済み] Javascript/DOM: DOMオブジェクトのイベントリスナーをすべて削除するには？

質問

ちょっと質問です。div などのオブジェクトのすべてのイベントを完全に削除する方法はありますか？

EDIT: 私は div.addEventListener('click',eventReturner(),false); をイベントとして追加しています。

function eventReturner() {
    return function() {
        dosomething();
    };
}

EDIT2: ある方法を見つけたのですが、それはうまくいっているのですが、私のケースには使えません。

var returnedFunction;
function addit() {
    var div = document.getElementById('div');
    returnedFunction = eventReturner();
    div.addEventListener('click',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
}
function removeit() {
    var div = document.getElementById('div');
    div.removeEventListener('click',returnedFunction,false);
}

どのように解決するのですか？

私はあなたがで何を意味するのかわからない を削除する すべて イベント . 特定のタイプのイベントのすべてのハンドラを削除するか、または1つのタイプのすべてのイベントハンドラを削除しますか？

すべてのイベントハンドラを削除する

すべてのイベントハンドラ (種類を問わない) を削除したい場合は、次のようにします。 クローン のような要素を作成し、そのクローンに置き換えます。

var clone = element.cloneNode(true);

注意 これは属性と子を保持しますが、DOMプロパティへの変更は保持しません。

特定のタイプのイベント ハンドラを削除します。

もう一つの方法は removeEventListener() という方法もありますが、すでに試されていてうまくいかなかったのでしょう。 ここで、キャッチ :

呼び出し addEventListener を無名関数に呼び出すと、毎回新しいリスナーが作成されます。呼び出す removeEventListener を無名関数 は何の効果もありません。 . 無名関数は、呼び出されるたびに一意なオブジェクトを生成します。この方法でイベントリスナーを追加する場合、それが一度だけ追加され、それが追加されたオブジェクトが破棄されるまで永久的（削除できない）であることを確認してください。

あなたは本質的に、無名関数を addEventListener として eventReturner は関数を返します。

これを解決するために2つの可能性があります。

1. 関数を返すような関数は使わない。関数を直接使用する。

    function handler() {
        dosomething();
    }
   
    div.addEventListener('click',handler,false);
   
   

2. のラッパーを作成します。 addEventListener のラッパーを作成し、返された関数への参照を保存し、奇妙な removeAllEvents 関数を作成します。

    var _eventHandlers = {}; // somewhere global
   
    const addListener = (node, event, handler, capture = false) => {
      if (!(event in _eventHandlers)) {
        _eventHandlers[event] = []
      }
      // here we track the events and their nodes (note that we cannot
      // use node as Object keys, as they'd get coerced into a string
      _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
      node.addEventListener(event, handler, capture)
    }
   
    const removeAllListeners = (targetNode, event) => {
      // remove listeners from the matching nodes
      _eventHandlers[event]
        .filter(({ node }) => node === targetNode)
        .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))
   
      // update _eventHandlers global
      _eventHandlers[event] = _eventHandlers[event].filter(
        ({ node }) => node !== targetNode,
      )
    }
   
   

で使えるし。

    addListener(div, 'click', eventReturner(), false)
    // and later
    removeAllListeners(div, 'click')

デモ

注意 もしあなたのコードが長時間実行され、多くの要素を作成したり削除したりするのであれば、あなたは必ず _eventHandlers に含まれる要素を削除する必要があります。