Как обрабатывается память при уничтожении элементов DOM?

Question

Если у меня есть click прослушиватель событий на многих динамически создаваемых элементах, будут ли они использовать память, когда removeEventListner вызывается *1003*, не так?

Скажем, у меня есть такой код:

for (var i = 0; i < 9999; i++) {
  var $btn = $('<button class="my_button">');
  $('body').append($btn);
  $btn.click(function(){ /* ... */ })
}

$('.my_button').remove();

Будут ли обработчики событий по-прежнему использовать память? Нужно ли мне звонить removeEventListner, если я хочу убедиться, что нет риска утечки памяти?

Answer 1

Память, удерживаемая этим элементом, будет освобождена, когда он будет удален из DOM и уничтожен. Это обрабатывается браузером, поэтому, хотя теоретически в не должно быть утечек памяти, вы зависите от сборщика мусора. лучший подход вы можете использовать здесь. Создайте делегированный обработчик события single на родительском элементе всех кнопок. Затем у вас есть один экземпляр обработчика событий, который работает для всех элементов кнопки. Это сэкономит память и означает, что вам не нужно беспокоиться о специфике любой сборки мусора при удалении элементов из DOM. Попробуйте это:

$('#buttonContainer').on('click', '.my_button', function() {
  // button click action here...
});