javascript 如何通过 DOMAttrModified 检测类更改

How to detect class changing by DOMAttrModified

提问by Lukas

I need to detect some class changing, i use for this DOMAttrModified, but something is wrong, what?

我需要检测一些类的变化，我使用这个 DOMAttrModified，但是出了点问题，什么？

var first_img = $('body').find('li:first').find('img');

first_img.on('DOMAttrModified',function(e){
    if (e.attrName === 'class') {
        if ($(this).hasClass('current-image')) {
            $(this).removeClass().addClass('previous-image');
        }
        console.log('log');
    }
});

Thx for advice.

谢谢你的建议。

回答by Ian

The immediate problem is that a attrNameproperty isn't part of jQuery's event's object...you need to use e.originalEvent.attrName. Here's an example of it working:

直接的问题是attrName属性不是 jQuery 事件对象的一部分......你需要使用e.originalEvent.attrName. 这是它工作的一个例子：

var first_img = $("body").find("div").first();

first_img.on("DOMAttrModified", function (e) {
    if (e.originalEvent.attrName === "class") {
        console.log("##DOMAttrModified, class changed");
        if ($(this).hasClass("current-image")) {
            console.log("##Element has 'current-image' class, changing");
            $(this).removeClass().addClass("previous-image");
        }
    }
});

setTimeout(function () {
    first_img.addClass("current-image");
}, 1000);

DEMO:http://jsfiddle.net/R5rTy/1/

演示：http : //jsfiddle.net/R5rTy/1/

The setTimeoutis to simulate the event randomly happening.

该setTimeout是模拟事件发生随机。

Apparently, the DOMAttrModifiedevent is not supported in all browsers - http://help.dottoro.com/ljfvvdnm.php#additionalEvents

显然，DOMAttrModified并非所有浏览器都支持该事件 - http://help.dottoro.com/ljfvvdnm.php#additionalEvents

---

---

UPDATE:

更新：

Using the newer MutationObserver, the following shows the use of both ideas:

使用较新的MutationObserver，以下显示了两种想法的使用：

var firstImg, observerConfig, firstImgObserver;

firstImg = $("body").find("div").first();
observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
};
firstImgObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
            console.log("MutationObserver class changed to", newVal);
        } else if (mutation.attributeName === "id") {
            console.log("MutationObserver id changed to", newVal);
        }
    });
});

firstImgObserver.observe(firstImg[0], observerConfig);
// later, you can stop observing
//observer.disconnect();

firstImg.on("DOMAttrModified", function (e) {
    var newVal = $(this).prop(e.originalEvent.attrName);
    console.log("DOMAttrModified", e.originalEvent.attrName, "changed to", newVal);
});

setTimeout(function () {
    firstImg.addClass("previous-image").addClass("fdsa");
}, 1000);

DEMO:http://jsfiddle.net/ybGCF/

演示：http : //jsfiddle.net/ybGCF/

Reference:

参考：

• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver