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

Ответ 1

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

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

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

• http://www.w3.org/2008/webapps/wiki/MutationReplacement
• http://www.quirksmode.org/dom/events/ > События W3C
• http://robertnyman.com/javascript/javascript-getters-setters.html

Ответ 2

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

Замена Наблюдатели за мутациями, посмотрите 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 также будет поддерживать эту функцию.

Ответ 3

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

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

• Firefox 14 +
• IE 11
• Край
• Opera 15 +
• Chrome 26+ (от 18 до 25 с префиксом, window.WebKitMutationObserver)
• Safari 6.0 (префикс, window.WebKitMutationObserver)

Ответ 4

Большая замена для устаревших событий 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).