Стоит ли удалять событие с элемента, перед его удалением? [дубликат]

91
27 ноября 2019, 06:20

На данный вопрос уже ответили:

  • Корректное удаление узлов из DOM, у которых зарегистрированы обработчики 1 ответ

В одном видео слышал, что удаляя элемент в котором есть событие мы не удаляем сам обработчик. Другими словами обработчик события продолжает работать, не смотря, что элемента нет. Хотел бы получить подтверждение или опровержение этим словам. Спасибо!

Answer 1

удаляя элемент в котором есть событие мы не удаляем сам обработчик

Да, при удалении элемента из dom-дерева все обработчики на нём остаются:

document.querySelector('button').addEventListener('click', function (e) { 
  e.target.remove(); 
  setTimeout(function () { 
    document.body.appendChild(e.target) 
  }, 500); 
});
<button>Click me</button>

Ну как я понимаю событие может находиться в памяти, но не выполняться

Выполняться тоже может:

document.querySelector('button').addEventListener('click', function(e) { 
  if (e.target.parentElement) { 
    e.target.remove(); 
    setTimeout(function() { e.target.click() }, 500); 
  } else { 
    document.body.appendChild(e.target); 
  } 
});
<button>Click me</button>

Стоит ли удалять событие с элемента, перед его удалением?

В большинстве случаев нет. Если на элемент нет других ссылок, то он всё равно будет собран сборщиком мусора вместе с обработчиком:

~function add() { 
  var btn = document.createElement('button'); 
  btn.textContent = "Click me"; 
 
  btn.addEventListener('click', function (e) { 
    btn.remove(); 
    setTimeout(add, 500); 
  }); 
 
  document.body.appendChild(btn); 
}();

Как видно в профайлере, выживших объектов от кликов кроме последнего нет:

Впрочем, в IE8 действительно была проблема с утечками в некоторых подобных случаях.

Однако, если обработчик или элемент каким-то образом удерживается внешним кодом, то они будут сохранены до тех пор, пока это удерживание не исчезнет. Если есть какие-либо подписки на более долгоживущие объекты или события, то отписываться надо.

Поэтому при использовании фреймвёрка, имеющего жизненный цикл компонента, рекомендуется при уничтожении компонента отписаться от всего, на что подписался руками.

READ ALSO
Некорректно работает скрипты в UC Browser

Некорректно работает скрипты в UC Browser

В UC Browser на IOS, при переходе по ссылке на ID элемент должен работать скрипт скролла выше этого элемента, но вместо этого страница странно пролистывается,...

126
Не получается прикрепить файл к форме

Не получается прикрепить файл к форме

Всем доброй ночиЕсть такой инпут:

98
как сделать наложение блоков html

как сделать наложение блоков html

Верстаю данный шаблон, и не получается сделать наложение блоков как на фото:

106
Удалить скрипт со страниц, определить Regex

Удалить скрипт со страниц, определить Regex

Мне нужно скрипт хакерский удалить с нескольких сотен страниц моего сайтаВот он скрипт:

101