JavaScript ですべてのイベント リスナーを削除する

今日の投稿では、JavaScript ですべてのイベント リスナーを削除する方法について説明します。

JavaScript ですべてのイベント リスナーを削除する

EventTarget インターフェイスの addEventListener() メソッドは、指定されたイベントがターゲットに配信されるたびに呼び出される関数を構成します。

addEventListener() メソッドは、EventListener を実装する関数またはオブジェクトを、呼び出された EventTarget で指定されたイベント タイプのイベント リスナーのリストに追加することによって機能します。

関数またはオブジェクトがそのターゲットのイベント リスナーのリストに既にある場合、その関数またはオブジェクトは 2 回目は追加されません。

EventTarget インターフェイスの removeEventListener() メソッドは、以前に EventTarget.addEventListener() を使用してターゲットから登録されたイベント リスナーを削除します。

現在 EventTarget に登録されている EventListener を識別しない引数で removeEventListener() を呼び出しても効果はありません。

ターゲット上の別のリスナーがイベントを処理している間に、EventListener が EventTarget から削除された場合、イベントは送出されません。 ただし、再配置することはできます。

特定の要素に対して 1つまたは 2つのリスナーのみが登録されている場合、removeEventListener の呼び出しは簡単です。 10 を超えるリスナーが登録されていて、すべてのイベント リスナーを削除したい場合はどうなりますか。

努力が必要です。 これを克服するために、この面倒な操作を実行する別の方法を学びます。

以下の例を見てみましょう。

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>

document.getElementById('grt-btn').addEventListener(
    'click', () => {console.log('firstClick')}, false);
document.getElementById('grt-btn').addEventListener(
    'blur', () => {console.log('Blur event')}, false);
document.getElementById('grt-btn').addEventListener(
    'focus', () => {console.log('focus event')}, false);

function removeListeners() {
  const oldBtnElement = document.getElementById('grt-btn');
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
  console.log('Removed all listners')
}

上記の例では、2つのボタンを定義しています。 最初のボタンは、リスナーをアタッチするボタンです。

2 番目のボタンは、最初のボタンからリスナーを削除するボタンです。

3つのイベント リスナーを定義しました。 Hello World ボタンをクリックするとすぐに、focus および click イベントがトリガーされます。 別のタブに移動してみてください。 blur イベントをトリガーします。

最後に、Remove listenersボタンをクリックすると、Hello Worldボタンが複製されます。 最後のステップは、div 要素の子ノードを cloneNode に置き換えることです。

これにより、以前にボタンに関連付けられていたすべてのイベント リスナーが自動的に削除されます。

Hello World ボタンをもう一度クリックしようとしても、イベントはトリガーされません。

出力：

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

デモはこちら