событие запуска при изменении атрибута DOM

Question

событие запуска при изменении атрибута DOM

есть ли способ вызвать событие (может быть пользовательским) при изменении атрибута?

Давайте, когда ИМГ СРЦ изменяется или innerHTML будет его высота?

598 5

jQuery javascript dom events javascript-events

5 ответов:

Comments

Ничего не найдено.

Dean Burge · Accepted Answer · 2017-05-12 21:45:53

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

Вы имеете в виду события мутации DOM. Существует плохая (но улучшающаяся) поддержка браузеров для этих событий. события мутации плагин для jQuery может помочь вам в этом.

Mats · Accepted Answer · 2018-02-04 19:32:05

Как настроить MutationObserver, в основном скопированный из MDN но я добавил свои собственные комментарии для ясности.

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();

надеюсь, что это помогает.

David Tang · Accepted Answer · 2010-12-30 12:44:26

Если вам нужно только что-то конкретное, то простой setInterval() будет работать, проверяя целевой атрибут(ы) каждые несколько миллисекунд:
var imgSrc = null;
setInterval(function () {
   var newImgSrc = $("#myImg").attr("src");
   if (newImgSrc !== imgSrc) {
      imgSrc = newImgSrc;
      $("#myImg").trigger("srcChange");
   }
}, 50);
затем привязать к пользовательскому событию "srcChange":
$("#myImg").bind("srcChange", function () {....});

redsquare · Accepted Answer · 2010-12-30 12:41:54

нет собственного события DOM changed, в которое вы можете подключиться.

хорошая статья здесь который пытается предоставить решение в виде плагина 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);
        }
    } }

Gerold Broser · Accepted Answer · 2018-02-03 18:17:24

кроме коврики' ответ вдохновленный пример использования MDN MutationObserver:

Если опции содержат <property>: true и вы планируете изменить это свойство цель внутри MutationObserver функция обратного вызова, используйте следующее, чтобы предотвратить рекурсивные вызовы-до таймаута скрипта, переполнения стека или тому подобного:
...
// 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);
...