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

Я думал, что не было слушателя 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, и этот вопрос возник. Однако в последнем комментарии по принятому вопросу говорится, что он устарел.

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

http://www.w3.org/TR/DOM-Level-3-Events/ говорит, что это событие устарело, что бы мы использовали вместо этого?

Есть ли подстановка для него?
PS Это должно работать только на Chrome, потому что это расширение Chrome.

Источник

3 ответа

Решение

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

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

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

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

Увидеть ниже:

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

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

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

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

Надеюсь, это поможет...

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

ОБНОВЛЕНИЕ: я написал небольшой скрипт, который делает то, что я только что написал в предыдущем обновлении:

$('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' );
Источник

Событие Mutation в настоящее время устарело из-за проблем с производительностью. Поэтому, пожалуйста, используйте 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. Есть слушатель изменения DOM JavaScript / jQuery?
Источник

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

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

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

Источник
Другие вопросы по тегам