Удаляются ли обработчики событий на узле DOM вместе с узлом?

Функции обработчика событий подвергаются той же «сборке мусора», что и другие переменные. Это означает, что они будут удалены из памяти, когда интерпретатор определит, что нет возможности получить ссылку на функцию. Однако простое удаление узла не гарантирует сборку мусора. Например, возьмите этот узел и связанный с ним обработчик событий.

var node = document.getElementById('test');
node.onclick = function() { alert('hai') };

Теперь давайте удалим узел из DOM.

node.parentNode.removeChild(node);

Таким образом, node больше не будет отображаться на вашем веб-сайте, но явно все еще существует в памяти, как и обработчик событий.

node.onclick(); //alerts hai

Пока ссылка на node все еще доступна каким-либо образом, связанные с ней свойства (из которых onclick является одним) останутся нетронутыми.

Теперь попробуем, не создавая висящей переменной.

document.getElementById('test').onclick = function() { alert('hai'); }

document.getElementById('test').parentNode.removeChild(document.getElementById('test'));

В этом случае, похоже, нет другого способа получить доступ к узлу DOM #test, поэтому при запуске цикла сборки мусора обработчик onclick должен быть удален из памяти.

Но это очень простой случай. Использование закрытий в Javascript может значительно усложнить определение возможности сбора мусора. Давайте попробуем привязать более сложную функцию обработчика событий к onclick

document.getElementById('test').onclick = function() {
  var i = 0;
  setInterval(function() {
    console.log(i++);
  }, 1000);

  this.parentNode.removeChild(this);
};

Поэтому, когда вы нажимаете #test, элемент будет немедленно удален, однако через одну секунду и каждую секунду после этого вы увидите увеличивающееся число, выводимое на вашу консоль. Узел удален, и дальнейшие ссылки на него невозможны, но, похоже, его части остались. В этом случае сама функция обработчика событий, скорее всего, не сохраняется в памяти, а создается область действия.

Думаю, ответ такой: По-разному. Если есть висячие доступные ссылки на удаленные узлы DOM, связанные с ними обработчики событий все равно будут находиться в памяти вместе с остальными их свойствами. Даже если это не так, область, созданная функциями обработчика событий, может по-прежнему использоваться и находиться в памяти.

В большинстве случаев (и, к счастью, игнорируя IE6), лучше просто доверить сборщику мусора свою работу, ведь Javascript - это не C. Однако в случаях, подобных последнему примеру, важно написать какие-либо функции деструктора для неявного отключения функциональности.

jQuery делает все возможное, чтобы избежать утечки памяти при удалении элементов из DOM. Пока вы используете jQuery для удаления узлов DOM, удаление обработчиков событий и дополнительных данных должно выполняться jQuery. Я настоятельно рекомендую прочитать Секреты JavaScript-ниндзя Джона Ресига по мере его продвижения. в подробностях о потенциальных утечках в различных браузерах и о том, как библиотеки JavaScript, такие как jQuery, могут обойти эти проблемы. Если вы не используете jQuery, вам определенно придется побеспокоиться об утечке памяти через потерянные обработчики событий при удалении узлов DOM.

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

Утечка памяти Javascript после выгрузки веб-страницы

В нашем коде, который основан не на jQuery, а на некотором отклоняющемся прототипе, у нас есть инициализаторы и деструкторы в наших классах. Мы обнаружили, что абсолютно необходимо удалить обработчики событий из объектов DOM, когда мы уничтожаем не только наше приложение, но и отдельные виджеты во время выполнения.

В противном случае мы получим утечку памяти в IE.

В IE на удивление легко получить утечки памяти - даже когда мы выгружаем страницу, мы должны быть уверены, что приложение «завершает работу» чисто, убирая все, - иначе процесс IE со временем будет расти.

Изменить: чтобы сделать это правильно, у нас есть наблюдатель событий на window для unload события. Когда наступает это событие, вызывается наша цепочка деструкторов, чтобы должным образом очистить каждый объект.

И пример кода:

/**
 * @constructs
 */
initialize: function () {
    // call superclass
    MyCompany.Control.prototype.initialize.apply(this, arguments);

    this.register(MyCompany.Events.ID_CHANGED, this.onIdChanged);
    this.register(MyCompany.Events.FLASHMAPSV_UPDATE, this.onFlashmapSvUpdate);
},

destroy: function () {

    if (this.overMap) {
        this.overMap.destroy();
    }

    this.unregister(MyCompany.Events.ID_CHANGED, this.onIdChanged);
    this.unregister(MyCompany.Events.FLASHMAPSV_UPDATE, this.onFlashmapSvUpdate);

    // call superclass
    MyCompany.Control.prototype.destroy.apply(this, arguments);
},

Не обязательно

документация по empty() методу jQuery отвечает на мой вопрос и дает мне решение моей проблемы. Он говорит:

Чтобы избежать утечки памяти, jQuery удаляет другие конструкции, такие как обработчики данных и событий, из дочерних элементов перед удалением самих элементов.

Итак: 1) если мы не сделаем это явно, мы получим утечки памяти, и 2) используя empty(), я могу этого избежать.

Поэтому я должен сделать это:

formSection.empty();
formSection.html(newContents);

Мне все еще не ясно, позаботится ли .html() об этом самостоятельно, но одна лишняя строка меня, конечно, не беспокоит.

Я хотел узнать себя, поэтому после небольшого теста я думаю, что ответ - да.

removeEvent вызывается, когда вы .remove () что-то из DOM.

Если вы хотите увидеть это сами, вы можете попробовать это и следовать коду, установив точку останова. (Я использовал jquery 1.8.1)

Сначала добавьте новый div:
$('body').append('<div id="test"></div>')

Установите флажок $.cache, чтобы убедиться, что к нему не привязаны события. (это должен быть последний объект)

Прикрепите к нему событие щелчка:
$('#test').on('click',function(e) {console.log("clicked")});

Протестируйте и увидите новый объект в $.cache:
$('#test').click()

Удалите его, и вы увидите, что объект в $.cache тоже исчез:
$('#test').remove()