Oglądanie zmian DOM, elegancki sposób

Question

Potrzebuję oglądać dla zmiany atrybutu na dowolnym z dzieci określonego elementu DOM. Do tej pory używam mutation events.

Problem polegał na tym, że były błędne: pod Chromium, DOMAttrModified nie został zwolniony, ale był DOMSubtreeModified. Problem był łatwy do rozwiązania: ponieważ zgodnie ze specyfikacją, DOMSubtreeModified jest wywoływane, jeśli którykolwiek z pozostałych zdarzeń jest uruchamiany, więc właśnie posłuchałem DOMSubtreeModified.

W każdym razie Chromium w najnowszych wersjach przestał wystrzeliwać wszystko, jeśli atrybut został zmodyfikowany.

Nowy Mutation Observer API działa jednak bezbłędnie.

Do chwili obecnej wystarczy wywołać wywołanie zwrotne po DOWOLNEJ zmianie poddrzewa określonego elementu - po prostu dlatego, że nic innego nie powinno się zmienić - więc rozwiązałem swój problem, używając tylko obserwatora mutacji & (jeśli dostępny) w tym samym kawałku kodu.

Jednak teraz potrzebuję silniejszego filtrowania zdarzeń (np. Na nowym węźle, na usuniętym węźle) - tak jest tam biblioteka, prawdopodobnie wtyczka jQuery, która pozwoliłaby mi elegancko używać zarówno tych interfejsów API - MutationObserver, jeśli są dostępne i zdarzenia mutacji jako rezerwowe, z możliwością filtrowania dla określonych typów zdarzeń (np. Element dodany, atrybut zmieniony).

E.g.

$("#test").watch({onNewElement: 1}, function(newElement){}) 
$("#test").watch({onNewAttribute: 1}, function(modifiedElement) {}) 

Albo bez jQuery

watchChanges("#test", {onNewElement: 1}, function(newElement){}) 
watchChanges("#test", {onNewAttribute: 1}, function(modifiedElement){}) 

Answer 1

to będzie działać?

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

$.fn.watch = function(props, callback, timeout){ 
    if(!timeout) 
     timeout = 10; 
    return this.each(function(){ 
     var el  = $(this), 
      func = function(){ __check.call(this, el) }, 
      data = { props: props.split(","), 
         func: callback, 
         vals: [] }; 
     $.each(data.props, function(i) { data.vals[i] = el.css(data.props[i]); }); 
     el.data(data); 
     if (typeof (this.onpropertychange) == "object"){ 
      el.bind("propertychange", callback); 
     } else if ($.browser.mozilla){ 
      el.bind("DOMAttrModified", callback); 
     } else { 
      setInterval(func, timeout); 
     } 
    }); 
    function __check(el) { 
     var data = el.data(), 
      changed = false, 
      temp = ""; 
     for(var i=0;i < data.props.length; i++) { 
      temp = el.css(data.props[i]); 
      if(data.vals[i] != temp){ 
       data.vals[i] = temp; 
       changed = true; 
       break; 
      } 
     } 
     if(changed && data.func) { 
      data.func.call(el, data); 
     } 
    } 
} 

Answer 2

Dla skutecznego monitorowania DOM z jQuery, można spojrzeć na jQuery Behavior Plugin (Zastrzeżenie: Jestem autor), który wykorzystuje zoptymalizowaną wersję Live Query. Używam go w kilku produktach od 3 lat, bez żadnych problemów.

Edit: Słuchanie zmian atrybutów będzie działać tak:

$.behavior({ 
    'div:first': { 
     'changeAttr': function (event, data) { 
      console.log('Attribute "' + data.attribute + '" changed from "' + data.from + '" to "' + data.to + '"'); 
     } 
    } 
}); 

$('div:first').attr('foo', 'bar');