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

标签 javascript jquery events memory-leaks event-listener

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对我来说并不实用......

最佳答案

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

关于javascript - jQuery 是否清空通过 addEventListener 附加的分离监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55226269/

相关文章:

debugging - 如何将 Jscript 调试器附加到进程?

javascript - 如果出现部分网址或短网址,如何重定向原始网址

javascript - 在移动设备上隐藏复选框的奇怪问题

javascript - 使用 addKeyListener 绑定(bind)按键 Javascript

javascript - 如何在更改事件中获取剑道组合框的值

javascript - 在 Angular 2 中访问 DOM 属性

javascript - 动态添加的目标 <tr>

javascript - 使用 javascript 将 html 写入新窗口

events - 如何在静态 UML 模型中表示基于事件的架构?

javascript - 无法将事件监听器附加到 IE8 中动态创建的元素