Реализация DOM слушателю

Question

я думал не было DOM слушателя так я реализовал свой собственный «тяжелого» слушателя:

function CvHelper(stackApi) { 
    var that = this; 

    // check if room is finished loading 
    this.init = function() { 
    if ($('#loading').length) { 
     setTimeout(that.init, 1000); 
    } else { 
     console.log('Chatroom finished loading'); 

     that.postListener(); 
    } 
    } 
} 

(function() { 
    var stackApi = new StackApi(); 
    var cvHelper = new CvHelper(stackApi); 
    cvHelper.init(); 
})(); 

Я думаю, что это просто отстой. Итак, я сделал поиск на SO и this question. Однако в last comment on the accepted question указано, что он устарел.

$("#someDiv").bind("DOMSubtreeModified", function() { 
    alert("tree changed"); 
}); 

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified говорит, что это событие является устаревшим, что бы мы используем вместо этого?

Есть ли подзаголовок для этого?
P.S. Он должен работать только на Chrome, поскольку это расширение Chrome.

Answer 1

Если вы посмотрите на:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent

В нем говорится, что в отношении DOMSubtreeModified, «Это может быть уволено после одной модификации к документу или, по усмотрению реализации языка, после нескольких изменений есть произошло «.

Таким образом, если вы используете другой MutationEvent, скажем DOMNodeInserted, вы можете получить более детерминированный запуск событий (вам просто нужно добавить элемент к узлу в этом конкретном случае).

Смотрите ниже:

$('body').prepend($('<div id="cow">Hello</div>')); 

$('#cow').bind("DOMNodeInserted",function(){ alert('hi'); }); 

$('#cow').prepend($("<div></div>")); 

Это было проверено в Chrome, кстати.

Надежда, что помогает ...

UPDATE: В качестве альтернативы, вы можете добавить более одного типа событий в одном вызове функции. Например, добавив четыре обработчика событий для DOMNodeInserted, DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified, тогда все обработчики вызовут один обработчик.

UPDATE: Я написал небольшой скрипт, который делает то, что я только что написал в предыдущем обновлении:

$('body').prepend($('<div id="cow">Hello</div>')); 

/** 
* This function registers event handlers which invoke the mutateHandler 
* handler when any of the MutationEvents are fired on a node: DOMNodeInserted, 
* DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified. 
* 
*/ 
var onMutate = function(mutateHandler){ 

    var that = this; 
    $(this).bind("DOMNodeInserted", function(event){ 
     mutateHandler.call(that, event); 
    }); 
    $(this).bind("DOMNodeRemoved", function(event){ 
     mutateHandler.call(that, event); 
    }); 
    $(this).bind("DOMAttrModified", function(event){ 
     mutateHandler.call(that, event); 
    }); 
    $(this).bind("DOMCharacterDataModified", function(event){ 
     mutateHandler.call(that, event); 
    }); 

}; 

onMutate.call($('#cow')[0], function(){ 
    alert($(this).attr('id')); 
}); 


$('#cow').prepend($("<div></div>")); 
$('#cow').addClass('my_class'); 

Answer 2

Похоже, что это на самом деле только устаревшим в рабочем проекте DOM Level 3 Events, который обеспечивает эту заметку:

Предупреждение! Интерфейс MutationEvent был введен в DOM Level 2 События, но еще не был полностью и функционально реализован среди пользовательских агентов. Кроме того, были критические замечания о том, что интерфейс , как и предусмотрено, представляет задачу и выполнение задачи . В настоящее время разрабатывается новая спецификация с целью использования , посвященного вариантам использования, которые решают мутационные события, но более подробно, чем в режиме . Таким образом, эта спецификация описывает события мутации для ссылки и полноты унаследованного поведения, но обесценивает использование интерфейса MutationEvent и интерфейса MutationNameEvent .

Так что если я правильно понял, ответ на вопрос «Есть ли еще замена?» «нет, еще нет».

Answer 3

Mutation Event в настоящее время устарел из-за его проблемы с производительностью. Следовательно, используйте Mutation Observer. Я сделал прослушиватель изменений DOM в одном из моих проектов, используя Mutation Observer, и он отлично поработал! Для вашей дальнейшей реализации эти ссылки помогут вам:

1. http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/
2. https://github.com/kapetan/jquery-observe
3. Is there a JavaScript/jQuery DOM change listener?