5

Возникает необходимость периодически, по средством AJAX, перезаписывать содержимое блока, по средством присвоения нового innerHTML, при этом на дочерние элементы этого блока были назначены обработчики, по средством element.addEventListener, которые я явно не удаляю, и при этом, после добавления элементов, регистрирую ещё и новые. В большинстве случаев, содержимое старого блока, в точности совпадает с новым, но при этом я всё равно его перезаписываю и повторно назначаю обработчики.

Меня интересует, при перезаписи дочерних элементов блока, по средством innerHTML удаляются ли также, вместе со всеми дочерними элементами, их объявленные обработчики, или же они остаются вместе с новыми, которые я каждый раз регистрирую по новой?

И если да, то происходит ли это также с element.remove() и parent.removeChild(element)?

7
  • @Grundy, спасибо за ссылку. Не знаю точно как в правилах, но я считаю основной и русскоязычный сайт, с точки зрения контента, абсолютно разными сайтами, по сему буду ожидать ответ на родном языке. Из того ответа, то что я частично понял, искажённым переводом, что если, создать обработчик и сразу же, зачем-то, удалить элемент, для которого он был назначен, то тогда случиться утечка памяти. Но там был рассмотрен базовый метод удаления, parent.removeChild(element), но как себя поведёт интерпретатор в моём случае с innerHTML, ведь этот метод не предназначен для явного удаления? 18 окт 2016 в 12:43
  • @IlyaIndigo вы правильно считаете сайты разными, но в комментариях допускается приводить ссылки на любые сайты, если там есть полезная информация. 18 окт 2016 в 15:17
  • 1
    @IlyaIndigo, суть ответа - удалится или нет - зависит от обработчика, что он использует и в каких замыканиях участвует. При изменении innerHTML полностью перестраиваются внутренности элемента, то есть все элементы, которые были внутри - удаляются, и вместо них создаются новые
    – Grundy
    18 окт 2016 в 15:22
  • 1
    не совсем, удалится обработчик или нет, кроме всего прочего зависит от того - в каких замыканиях он еще используется, в ответе по ссылке был пример с setInterval демонстрирующий проблему
    – Grundy
    18 окт 2016 в 15:54

1 ответ 1

2

Ваш случай никоим образом не относится напрямую к dom элементам или к слушателям. Это обычный случай на понимание сборщика мусора или как его называют Garbage Collection или просто GC.

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

Другими словами, если передать в объект a ссылку на объект b, а затем удалить ссылку на объект a, то объект b его не удержит.

let a = { b: null };
let b = { a: a };

a.b = b;
a = null; // объект { b: a } будет удален из памяти.

Что же происходит, когда мы подписываемся под события. Сначала нужно вспомнить что такое EventDispatcher -

export default class EventDispatcher {
    constructor(){
        this.handlers = {};
    }

    addEventListener(type, handler){
        let handlerAll = this.handlers[ type ];

        if( ! handlerAll){
            handlerAll = this.handlers[ type ] = [];
        }

        handlerAll.push( handler );
    }
    removeEventListener(type, handler){
        let handlerAll = this.handlers[type];

        if(handlerAll){
            let index = handlerAll.indexOf( handler );

            if(index > -1){
                handlerAll.splice( index, 1 );

                if( ! handlerAll.length) {
                    delete this.handlers[type];
                }
            }
        }
    }
    dispatchEvent(type, event){}
}

Это очень упрощенный пример, который не содержит комментариев, только потому, что там все до банальности легко. Но особое внимание стоит обратить на то, что передаваемый слушатель просто сохраняется в EventDispatcher. Другими словами -

let EventDispatcher = { handlerAll: [  ] };
let handler = function(){};
EventDispatcher.handlerAll.push( handler );

EventDispatcher = null; //все, EventDispatcher канул вне небытия
                        // и handler не смог его удержать.

Получается что если ситуация очень простая, почти нереальная, то после удаления объекта из dom он благополучно удалится. Но дело в другом! Остается очень большая вероятность что в памяти останется висеть тот контекст, в котором происходила подписка и это ещё при лучшем стечении обстоятельств. Ведь самая главная причина по которой было одобрено правило хорошего тона "всегда удалять слушатели" является замыкание, которое в javascript является основой.

Поэтому я не буду описывать все возможные причины утечек, а лишь ещё раз скажу, что хорошим тоном считается всегда удалять слушатели, да и вообще чистить объекты вручную.

Ну а если быть совсем откровенными друг с другом, то нужно понимать что такое Element возвращаемый нам при запросе. когда мы просим выдать нам нужный элемент по какому-то идентификатору, например document.querySelector(#some-id);, программа возвратит нам объект, который представляет из себя совокупность свойств и методов для управления
объектом созданным на более низком уровне. И когда Вы пишите так как ниже, то сохраняете ссылку на элемент в переменную -

let element = document.querySelector( `#some-id` );

element.addEventListenr( 'click', element_clickHendler );
function element_clickHendler(){}

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

document.querySelector( `#some-id` ).addEventListenr( 'click', element_clickHendler );
function element_clickHendler(){}

Если Вы сделаете так как выше, то при удалении элемента любыми известными способами удалит и элемент из дисплей листа и объект элемента. Следовательно и слушатель удалится вместе с объектом элемента. И все это из-за того что ссылка на возвращаемый при поиске объект не сохраняется.

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

2
  • Спасибо за ваш ответ, я понял вашу мысль, но принять его я не могу. 18 окт 2016 в 14:47
  • Удалять все обработчики без явной на то необходимости слишком накладно, тем более, для их удаления мне ещё нужна знать строку с которой они создавались с точностью до пробельного символа, что делает их удаление ещё труднее. 18 окт 2016 в 15:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.