JS привязывает события к элементам один раз при построении дерева или многократно?

Question

[ImagineWorld]

Если привязать клик к определенному элементу, например кнопке, загрузить страницу со скриптами и кнопкой, а потом динамически обновить кнопку: удалить и создать заново, с таким же классом,то привязанный к ней клик, после этой манипуляции - сработает снова?

Comments

[Тигран Абрамян]

попробуй и узнаешь

[ImagineWorld]

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

Answer 1

[Stalker_RED]

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

Comments

[Алексей]

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

[ImagineWorld]

Алексей, а как это делается? Был бы признателен, за ответ

[Stalker_RED]

Алексей, ImagineWorld, если нет ссылок на удаленный элемент его удалит сборщик мусора. И обработчики тоже удалит.

[Алексей]

Stalker_RED, Это да. Но например клик вызывает обращение к серверу. Кнопка уже удалена, а ответ еще не успел прийти. В итоге ответ не нужен, а ответ приходит - лишний запрос. Когда это одна кнопка это не критично, а вот когда таких моментов много, они в сумме замедляют приложение

[Алексей]

ImagineWorld, https://learn.javascript.ru/introduction-browser-events раздел removeEvent

Answer 2

[v3shin]

События привязываются к каждому конкретному элементу, поэтому при удалении элемента удаляется и обработчик события. Но события всплывают: к примеру, клик по кнопке также означает клик по контейнеру кнопки, по контейнеру контейнера и т.д. вплоть до document. Поэтому если вы планируете манипулировать элементами, имеет смысл привязаться к тому элементу, который никуда не денется и разбираться с событиями на его уровне.

document.addEventListener('click', function(e) {
    if (e.target.closest('.myElement')) { ... }
});

Answer 3

[Pashok Doom]

$(document).on('click', '.class', function(){
	//something - сработает
})

$('.class').on('click', function(){
	// something - нет
})

Answer 4

[Надим]

Если вам надо, чтобы при удалении и создании элемента заново обработчик на нем оставался, то имеет смысл тупо прописать обработчик в соответствующий атрибут. Например:

<button onclick="alert('Проверка');">Нажми меня</button>

Вместо onclick может любой другой обработчик: onhover, onfocus и так далее.