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()或自己删除事件监听器都不会导致元素本身被垃圾回收。您将必须确保您的逻辑不再引用要删除的元素。

jQuery是否会通过addEventListener附加空的分离侦听器？

1 个答案: