Как правильно удалить элементы DOM в Prototype JS?

Question

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

<div id="container">
   <video src="movie.mp4"></video>
   <a>Some button</a>
</div>

Как с помощью Prototype JS правильно удалить каждый элемент и его прослушиватели событий из памяти?Ниже приведен явный способ очистки всего:

$('container').childElements().each(
   function(child) {
      Event.stopObserving(child);
      child.remove();
   }
);

Ниже приведен гораздо более быстрый способ очистки контейнера:

$('container').update();

Но приведет ли это к утечкам памяти?Понимает ли большинство движков javascript, что если я очищу innerHTML, я также хочу очистить прослушиватели событий для каждого элемента?

Answer 1

Обычно обработчики событий исчезают, когда элемент удаляется.Очистка innerHTML контейнера уничтожает все содержащиеся в нем элементы, таким образом, прикрепленные обработчики событий.

В более старых версиях Internet Explorer (<= IE8) возникают проблемы с повторным запросом памяти у обработчиков событий, когда владелец элемента был уничтожен.,Чтобы приспособить их, вы должны использовать <code>Event.stopObserving.

. Чтобы быть абсолютно уверенным, вы можете расширить Element следующим образом:

Element.addMethods({
    clear: function(element) {
        element = $(element);

        element.descendants().each(function(elem) {
            Event.stopObserving(elem);
        });

        return element.update();
    }
});

Это удалит все события из всех потомков перед повторнымустановка самого содержимого элемента.Кажется, что Event.stopObserving() сам по себе не является рекурсивным, поэтому без этого шага все еще могут быть утечки из элементов «дальше вниз».Используйте это следующим образом:

$('container').clear();

Смотрите это как jsFiddle.

Отказ от ответственности: я не знаком с прототипом.Если вышеприведенное неверно, оставьте комментарий.

Связанное чтение:

• Почему эта утечка в Internet Explorer 8?
• Дуглас Крокфорд об утечках памяти в IE

Answer 2

Если вы будете регулярно добавлять и удалять элементы в стабильном контейнере, это может сэкономить время и проблемы с памятью, если вместо этого использовать Event.on.

$('container').on('click', 'a', function() {
    // button is clicked
});

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