記事

要素の属性が変更された場合にイベントを発火させたい人生だった

あると思うじゃん?(一発でできるのが)ないんだなそれが

DOMAttrModified

わかりやすいがfirefox限定 てか非推奨

window.addEventListener("load", function(){
    document.body.addEventListener("DOMAttrModified", function(e){
        console.log("changed");
    }, true);
    document.body.style.backgroundColor = "#222222";
    document.body.id = "hogehoge";
}, true);

MutationObserver

DOMAttrModifiedが引退して代打で出てきたのがコイツ。

var targetNodes = document.body;
var mo = new MutationObserver (function(mutationRecords) {
  mutationRecords.forEach ( function (mutation) {
    console.log(mutation.type);
  });
});
mo.observe(targetNodes,{ childList: true, characterData: true, attributes: true, subtree: true });

$("#mybutton").on("click", function() {
  $("#target").toggle();
});
  • targetNodesで範囲を限定できる $("body")だと動かない
  • 仕様はMozillaさんのサイトが詳しいので割愛