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

#javascript #html #события #javascript_events

        
             
                
                    
                        
                            На этот вопрос уже дан ответ здесь:
                            
                        
                    
                
                        
                            Корректное удаление узлов из DOM, у которых зарегистрированы
обработчики
                                
                                    (1 ответ)
                                
                        
                                Закрыт 11 месяцев назад.
            
                    
В одном видео слышал, что удаляя элемент в котором есть событие мы не удаляем сам
обработчик. Другими словами обработчик события продолжает работать, не смотря, что
элемента нет. Хотел бы получить подтверждение или опровержение этим словам. Спасибо!
    

Ответы

Ответ 1

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


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



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






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


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



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);
  }
});






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


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



~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 действительно была проблема с утечками в некоторых подобных случаях.



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

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