javascript - jQuery 是否清空通过 addEventListener 附加的分离监听器？

Question

jQuery 的 .empty() 方法是否删除通过

附加的监听器

var e = () => { ... };
element.addEventListener('click', e);

以及或仅通过附加的内容

var e = () => { ... };
$(element).on('click', e);

我在这里考虑内存泄漏:如果我在 DOM 中动态创建了元素，并且还附加了事件监听器，并且我想再次从 DOM 中删除这些元素 - 我会这样做

• 要么必须使用removeEventListener()从我想要手动删除的每个节点中删除每个监听器
• 或者必须使用像 jQuery 这样的库来分别使用 .on() 和 .empty() 添加和删除监听器？

据我了解this question ，动态添加和删除具有事件监听器的元素不会清除所有引用，因此会导致这些元素保留在内存中。

var element = document.createElement('div');
var handler = function() {
    alert('foo');
};

document.body.appendChild(element);

// Option 1
element.addEventListener('click', handler);
document.body.innerHTML = '';

// Option 2
element.addEventListener('click', handler);
$(document.body).empty();

// Option 3
$(element).on('click', handler);
$(document.body).empty();

哪个选项不仅从 DOM 中完全删除元素，而且完全释放其内存？不幸的是，使用removeEventListener对我来说并不实用......

Answer 1

empty() 从父元素中删除子元素。附加到元素的任何事件监听器将不再存在，因为子元素将不再存在。

另外:https://api.jquery.com/empty

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

如果 jQuery 知道元素正在被销毁，它也会自行清理。

但是，这些都不能保证 javascript 中的元素仍然没有变量引用，这将导致它们不被垃圾收集。 empty() 和您自己删除事件监听器都不会导致元素本身被垃圾收集。您必须确保您的逻辑不再引用要删除的元素。