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

为避免内存泄漏，jQuery 在删除元素本身之前从子元素中删除其他构造，例如数据和事件处理程序。

如果您想删除元素而不破坏其数据或事件处理程序（以便以后可以重新添加），请改用 .detach()。

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

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