evento de disparo en el atributo DOM cambio

Question

¿hay alguna forma de desencadenar evento (puede ser personalizado) en el cambio de atributo?

Digamos, cuando se cambia IMG src o innerHtml de DIV?

Answer 1

Nota: A partir de 2012, los eventos de mutación se han eliminado del estándar y ahora están en desuso. Consulte otras respuestas o documentación sobre cómo usar su reemplazo, MutationObserver.

Usted está haciendo referencia a DOM Mutation Events. El soporte del navegador es pobre (pero mejora) para estos eventos. Mutation Events plugin for jQuery puede llevarte un poco del camino.

Answer 2

No hay un evento de dom nativo en el que se pueda conectar.

Buen artículo here que intenta proporcionar una solución en forma de un plugin jquery.

Código del artículo

$.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 3

Si sólo necesita algo específico, entonces un simple setInterval() trabajará, comprobando el atributo de destino (s) cada pocos milisegundos:

var imgSrc = null; 
setInterval(function() { 
    var newImgSrc = $("#myImg").attr("src"); 
    if (newImgSrc !== imgSrc) { 
     imgSrc = newImgSrc; 
     $("#myImg").trigger("srcChange"); 
    } 
}, 50); 

A continuación, se unen a la costumbre "srcChange" evento:

$("#myImg").bind("srcChange", function() {....}); 

Answer 4

Cómo configurar un MutationObserver, principalmente copiado de MDN pero he agregado mis propios comentarios para mayor claridad.

window.MutationObserver = window.MutationObserver 
    || window.WebKitMutationObserver 
    || window.MozMutationObserver; 
// Find the element that you want to "watch" 
var target = document.querySelector('img'), 
// create an observer instance 
observer = new MutationObserver(function(mutation) { 
    /** this is the callback where you 
     do what you need to do. 
     The argument is an array of MutationRecords where the affected attribute is 
     named "attributeName". There is a few other properties in a record 
     but I'll let you work it out yourself. 
     **/ 
}), 
// configuration of the observer: 
config = { 
    attributes: true // this is to watch for attribute changes. 
}; 
// pass in the element you wanna watch as well as the options 
observer.observe(target, config); 
// later, you can stop observing 
// observer.disconnect(); 

Espero que esto ayude.

Answer 5

Además de Mats' answer inspirado por MDN's MutationObserver Example usage:

Si sus opciones contienen <property>: true y planea cambiar esta propiedad de objetivo dentro de la función de devolución de llamada MutationObserver 's, utilice el siguiente para evitar que las llamadas recursivas - hasta tiempo de espera de secuencia de comandos, desbordamiento de pila o similar:

... 
// Used to prevent recursive calls of observer's callback function 
// From https://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change 
let insideInitialObserverCallback = false 

let callback = function(mutationsList) { 
    insideInitialObserverCallback = ! insideInitialObserverCallback 
    if (insideInitialObserverCallback) { 

     // ... change target's given property ...  

    } 
}) 

let observer = new MutationObserver(callback); 
...