DOM要素を削除すると、イベントリスナーもJavaScriptのメモリから解放されるのか？

モダンブラウザでは、DOM要素を削除すると、その要素に紐づけられたイベントリスナーもJavaScriptのメモリから解放されます。

ただし条件付き：参照がなくなった場合のみ

注意すべきなのは、この動作が起こるのは要素への参照が一切なくなった場合のみだという点です。言い換えると、その要素がどこからも参照されておらず、ガベージコレクション（GC）による回収対象になれる状態であることが前提となります。

つまり、DOMから要素を削除したとしても、JavaScriptの変数や配列、オブジェクトなどがその要素への参照を保持し続けている間は、要素自体もイベントリスナーもメモリ上に残り続けます。

具体例

const button = document.querySelector('#myButton');

button.addEventListener('click', () => {
  console.log('クリックされました');
});

// DOMから要素を削除
button.remove();

// しかし、変数 button がまだ要素を参照しているため
// この時点ではリスナーも含めてメモリに残ったまま

button = null; // 参照を切ればGCの対象になり、リスナーも解放される

まとめ

• モダンブラウザでは、DOMから削除された要素のイベントリスナーは、ガベージコレクションとともにメモリから解放されます。
• ただし、それは要素への参照が完全になくなった場合に限られます。
• 意図せず参照を保持してしまうとメモリリークの原因になるため、不要になった変数には null を代入するなどの対策が有効です。