Как правильно переопределить обработчики событий DOM?
Если я создал кнопку и прикрепил обработчик кликов:
let btn = document.createElement("button");
btn.innerHTML = "Do Something";
btn.onclick = () => { doSomething(); };
document.body.appendChild(btn);
А позже я хочу повторно использовать кнопку для чего-то другого, это безопасный способ переопределить обработчик событий?
btn.innerHTML = "Do Something Else";
btn.onclick = () => { doSomethingElse(); }
Я видел несколько примеров, которые устанавливают btn.onclick = null; перед присоединением нового обработчика. Также несколько примеров с addEventListener() / removeEventListener(). Есть ли разница между этими методами? Могу ли я вводить утечки памяти с любым из них?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать его метод addEventListener(), который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию removeEventListener().
После удаления предыдущего обработчика событий вы можете снова прикрепить новый обработчик event к тому же элементу. Таким образом, не будет никаких утечек памяти.
Демонстрация кода:
let btn = document.createElement("button");
btn.innerHTML = "Do Something";
element.addEventListener("click", doSomething, true)
document.body.appendChild(btn);
...
btn.removeEventListener("click", doSomething, true);
// Третий аргумент должен быть таким же, как в предыдущем случае. правда в этом случае.
btn.addEventListener("click",doSomethingThingElse};
Спасибо! Вызывает ли btn.onclick = ... утечку памяти?
Лично я чувствую, что это будет причиной. Поскольку наш обработчик остается там, а просто ссылка устанавливается в нулевое значение. Но я не уверен на 100%, приятель :) Если мой ответ вам хоть как-то помог. Проголосуйте и примите ответ, чтобы другие разработчики могли извлечь выгоду :) Спасибо.
Проголосовал за вашу помощь, но мне все еще не совсем ясно. На старый обработчик больше не ссылаются, поэтому он должен быть удален сборщиком мусора. Нет?
Я! Но мы не контролируем сборку мусора сами. Это автоматический процесс. Вот что такое утечка памяти. Сбор мусора может произойти, а может и не произойти немедленно. :)
О, я в порядке с некоторой задержкой. Я просто хочу убедиться, что я не создаю вещи, которые останутся в памяти на неопределенный срок. Хорошая мысль.
Отпустите, когда память больше не нужна: на этом этапе возникает большинство проблем с управлением памятью. Самый сложный аспект этого этапа — определить, когда выделенная память больше не нужна. developer.mozilla.org/en-US/docs/Web/JavaScript/…
В приведенном выше комментарии я делюсь с вами некоторой ценной информацией :) О проблеме с утечками памяти :) И почему мы не уверены, когда сборка мусора начнет действовать. Просто нажмите на ссылку и получите больше знаний! Бог благословил
все должно быть в порядке, если вы переопределите обратный вызов слушателя, возможно, они установят его равным нулю или удалит его, чтобы отключить событие, связанное с кнопкой