Удалится ли обработчик события, если я удалю элемент, на котором стоит этот обработчик?

Question

[Александр Белов]

Перевод описанием вопроса скажу сразу, что у меня событие висит не как атрибут элемента (onclick="...").

Опишу вопрос подробнее на примере:
Допустим, у меня есть элемент section, в котором находятся 100 элементов div, на каждом из которых висит обработчик события click. Если я вставлю другие элементы в элемент section, обработчики событий с прошлых div'ов удалятся?

1) Если не удалятся — нужно ли заботиться об очищении этих обработчиков прежде, чем содержимое section изменится, или они не сильно захламляют память? Если увеличить число элементов div, в каждом из которых есть еще вложенные элементы, на которых тоже висят обработчики, то, получается, придется сильно засорять основной поток циклом, который будет удалять эти обработчики?

2) Если удалятся — проблема решена :)

Answer 1

[aen]

Если обработчики клика повешаны на сами div'ы, то они останутся в памяти. При удалении старых div'ов и добавлении новых они будут дальше работать.

Если вам нужно удалить все обработчики на элементах внутри некоего <section id="section"></section>, то используйте метод .empty() на этом контейнере. С удалением содержимого контейнера он удалит и обработчики.

Используйте делегирование: $('#section').on('click', 'div', function(e) {}).

Если вам нужно со 100% гарантией удалять обработчики, то лучше это сделать в ручную, если есть такая возможность.

Answer 2

[Артур Кох]

Обработчик то один. С чего вдруг он должен отвязаться от уже имеющихся дивов?
Вопрос скорее в том, появится ли он на новых элементах. Приведу пример на jQuery

$("#section > div").click(function(){ alert(1); })

При клике на каждый div(потомок первого уровня) внутри section будет срабатывание обработчика.
На динамически добавленные дивы обработчик вешаться не будет.

А вот так:

$(document).on("click", "#section > div", function(){ alert(1); })

Обработчик будет работать как на изначальных блоках, так и на динамически добавленных. Ничего не надо удалять. Обработчик один, память не захламлена.

Answer 3

[Артур Кох]

Селектор $("#section > div") можно заменить на $("#section").children("div")

Answer 4

[Виталий Желтяков]

Во-первых, разберитесь с делегированием - по моему у Вас с этим проблемы. Выше описали правильные решения.

Для общего развития:
Во-вторых, обработчики могут не удалиться, например, если выполняется какое-нибудь действие на onClick. Он будет жить дальше сам по себе, т.к. фактически является замыканием, а после удаления элемента превращается в скрытое замыкание. Обработчик живущий сам по себе может вызвать утечку памяти.

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