1. ホーム
  2. javascript

[解決済み] ある要素のリスナーをすべて削除するには?重複

2022-02-28 18:21:45

質問

ボタンがあり、いくつかの eventlistners を追加しました。

document.getElementById("btn").addEventListener("click", funcA, false);
document.getElementById("btn").addEventListener("click", funcB, false);
document.getElementById("btn").addEventListener("click", funcC, false);
document.getElementById("btn").addEventListener("blur" , funcD, false);
document.getElementById("btn").addEventListener("focus", funcE, false);

<button id="btn">button</button>

で削除できるんです。

document.getElementById("btn").removeEventListener("click",funcA);

すべてのリスナーを一度に削除したい場合や、関数の参照先がない場合はどうすればよいのでしょう ( funcA )? それとも1つ1つ削除しなければならないのでしょうか?

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

一番手っ取り早いのは、ノードをクローンして、すべてのイベントリスナーを削除することだと思います。

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

ただ、これは当該ノードのすべての子要素のイベントリスナーをクリアするので、それを維持したい場合は、明示的にリスナーをひとつずつ削除していく必要があります。