如何通过DOMAttrModified检测类更改
我需要检测一些类更改，我使用这个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'); } }); 感谢您的建议。
当前的问题是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);
演示： http ： //jsfiddle.net/R5rTy/1/
setTimeout用于模拟随机发生的事件。
显然，并非所有浏览器都支持DOMAttrModified事件 – http://help.dottoro.com/ljfvvdnm.php#additionalEvents
更新：
使用较新的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);
演示： http ： //jsfiddle.net/ybGCF/
参考：