javascript - atributos - evento de disparo en el cambio de atributo DOM

javascript atributo

Question

¿Hay alguna manera de desencadenar evento (puede ser personalizado) en el cambio de atributo?

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

Answer 1

Además de la respuesta de Mats inspirada en el uso de MutationObserver Example de MDN :

Si sus opciones contienen <property>: true y planea cambiar esta propiedad de destino dentro de la función de devolución de llamada de MutationObserver , use lo siguiente para evitar llamadas recursivas: hasta el tiempo de espera del script, el desbordamiento de la pila o similares:

...
// 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);
...

Answer 2

Cómo configurar un MutationObserver, principalmente copiado de MutationObserver 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 3

No hay un evento de dom nativo en el que te puedas conectar.

Buen artículo here que trata de 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 4

Si solo necesita algo específico, un simple setInterval() funcionará, verificando los atributos de destino 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, vincúlese al evento personalizado "srcChange":

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

Answer 5

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

Te refieres a Eventos de Mutación DOM . El soporte del navegador es pobre (pero mejora) para estos eventos. El plugin Mutation Events para jQuery puede ayudarte a conseguirlo.