Замена событий мутации DOM - PullRequest
Новая
       20

Замена событий мутации DOM

21 голосов
/ 24 марта 2011

Поскольку мутация DOM помечена как устаревшая в w3c (см. http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents),, существует ли (быстрый) альтернативный способ обнаружения изменения атрибута в DOM?

Ответы [ 4 ]

31 голосов
/ 19 июня 2012

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

Замена: Наблюдатели мутаций , посмотрите на http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers и https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

Информация о мутациях доставляется наблюдателям в виде упорядоченной последовательности MutationRecords,представляет наблюдаемую последовательность изменений, которые произошли

Пример использования: 

    var observer = new MutationObserver(function(mutationRecords) {
    // Handle mutations
     });

    observer.observe(myNode,
     {  // options:
     subtree: true,  // observe the subtree rooted at myNode
     childList: true,  // include information childNode insertion/removals
     attribute: true  // include information about changes to attributes within the subtree
    });

Это поддерживается в ночных сборках Chrome 18 и Firefox и Webkit.Firefox 14 также будет поддерживать эту функцию.

13 голосов
/ 12 декабря 2012

Отличная замена устаревшим событиям DOM * - animationStart в сочетании с CSS-анимациями. Дэвид Уолш пишет о методе.

Сначала настройте ключевые кадры и примените их к элементам, которые вы хотите прослушать ( не забудьте префиксы вендора! ): 

@keyframes nodeInserted {  
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }  
}

#parentElement > li {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

Затем добавьте слушателя: 

var insertListener = function(event){
  if (event.animationName == "nodeInserted") {
    // This is the debug for knowing our listener worked!
    // event.target is the new node!
    console.warn("Another node has been inserted! ", event, event.target);
  }
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Та-да! Вот демо Дэвида . Это прекрасно работает для меня с расширением Chrome, которое добавляет фотографии Facebook в Google Voice (см. Content.css и injected.js).

12 голосов
/ 26 июня 2012

Год спустя , есть новые и блестящие Mutation Observers от DOM Level 4 (перейдите по ссылкам, они многое объясняют!).Когда Mutation Event срабатывает тысячу раз, MutationObserver срабатывает только один раз со всеми модификациями, содержащимися и доступными.

Работает для (по состоянию на 2017/03):

  • Firefox14 +
  • IE 11
  • Edge
  • Opera 15 +
  • Chrome 26+ (с префиксом от 18 до 25, window.WebKitMutationObserver)
  • Safari 6.0 (с префиксом window.WebKitMutationObserver)
7 голосов
/ 05 апреля 2011

Насколько я знаю, альтернативы нет (пока), поэтому вы застряли на DOMAttrModified, который поддерживается только в Firefox и Opera. В IE у вас есть событие onpropertychanged, но в Chrome / Safari нет возможности получить подобную функциональность. Есть несколько вещей, которые вы можете сделать в зависимости от того, что вы пытаетесь выполнить, и браузеры, на которые вы ориентируетесь:

  • определяет методы получения и установки для атрибутов, которые вы хотите отслеживать
  • методы переопределения, такие как document.createAttribute, attributes.setNamedItem, ...

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

...