[解決済み] 要素を削除する前に、イベントリスナーを削除する必要がありますか？

質問

イベントリスナーがバインドされている子要素を持つ親要素がある場合、親をクリアする前にそれらのイベントリスナーを削除する必要がありますか? (例, parent.innerHTML = ''; ) イベント リスナーが DOM から削除されたときに要素からバインドされていない場合、メモリ リークが発生する可能性がありますか？

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

ここで情報を更新しておきます。私はさまざまなブラウザをテストしてきましたが、特に iframe のオンロード イベントで循環的に依存するイベント リスナーのメモリ リークについてです。

使用したコード（jsfiddle はメモリ テストを妨害するので、これをテストするには独自のサーバーを使用します）。

<div>
    <label>
        <input id="eventListenerCheckbox" type="checkbox" /> Clear event listener when removing iframe
    </label>
    <div>
        <button id="startTestButton">Start Test</button>
    </div>
</div>

<div>
    <pre id="console"></pre>
</div>

<script>

    (function() {
        var consoleElement = document.getElementById('console');
        window.log = function(text) {
            consoleElement.innerHTML = consoleElement.innerHTML + '<br>' + text;
        };
    }());

    (function() {
        function attachEvent(element, eventName, callback) {
            if (element.attachEvent)
            {
                element.attachEvent(eventName, callback);
            }
            else
            {
                element[eventName] = callback;
            }
        }

        function detachEvent(element, eventName, callback) {
            if (element.detachEvent)
            {
                element.detachEvent(eventName, callback);
            }
            else
            {
                element[eventName] = null;
            }
        }

        var eventListenerCheckbox = document.getElementById('eventListenerCheckbox');
        var startTestButton = document.getElementById('startTestButton');
        var iframe;
        var generatedOnLoadEvent;

        function createOnLoadFunction(iframe) {
            var obj = {
                increment: 0,
                hugeMemory: new Array(100000).join('0') + (new Date().getTime()),
                circularReference: iframe
            };

            return function() {
                // window.log('iframe onload called');
                obj.increment += 1;
                destroy();
            };
        }

        function create() {
            // window.log('create called');
            iframe = document.createElement('iframe');

            generatedOnLoadEvent = createOnLoadFunction(iframe);
            attachEvent(iframe, 'onload', generatedOnLoadEvent);

            document.body.appendChild(iframe);
        }

        function destroy() {
            // window.log('destroy called');
            if (eventListenerCheckbox.checked)
            {
                detachEvent(iframe, 'onload', generatedOnLoadEvent)
            }

            document.body.removeChild(iframe);
            iframe = null;
            generatedOnLoadEvent = null;
        }

        function startTest() {
            var interval = setInterval(function() {
                create();
            }, 100);

            setTimeout(function() {
                clearInterval(interval);
                window.log('test complete');
            }, 10000);
        }

        attachEvent(startTestButton, 'onclick', startTest);
    }());

</script>

メモリリークがなければ、テスト実行後、使用メモリは1000kb程度かそれ以下に増加します。しかし、メモリリークがある場合、メモリは約16,000kb増加します。イベント リスナーを最初に削除すると、常にメモリ使用量が少なくなります (リークがない)。

結果

• IE6 - メモリ リーク
• IE7 - メモリリーク
• IE8 - メモリリークなし
• IE9 - メモリリークあり(?????)
• IE10 - メモリ リーク (????)
• IE11 - メモリ リークなし
• Edge (20) - メモリリークなし
• Chrome (50) - メモリリークなし
• Firefox (46) - 言いにくいのですが、ひどくリークしていないので、単に非効率的なガベージコレクタではないでしょうか？明白な理由もなく 4MB を追加して終了します。
• Opera (36) - メモリ リークはありません。
• Safari (9) - メモリリークなし

結論 ブリーディング エッジ アプリケーションは、イベント リスナーを削除しなくてもおそらく大丈夫でしょう。しかし、迷惑をかけたとしても、私はそれが良い習慣であると考えます。