JavaScriptを使用しています。属性の変更をリッスンする？

質問

JavaScriptで、属性値の変更をリッスンすることは可能でしょうか？例えば

var element=document.querySelector('…');
element.addEventListener( ? ,doit,false);

element.setAttribute('something','whatever');

function doit() {

}

の変更に対応したいと思います。 something 属性の変更に対応したいと思います。

について読みました。 MutationObserver オブジェクトと、その代替品 (アニメーション イベントを使用するものを含む) について読みました。私が知る限り、それらは実際の DOM への変更に関するものです。私は、特定の DOM 要素の属性の変更に興味があるので、それではないと思います。確かに、私の実験では、それは動作しないようです。

私はこれを行いたいのです を使わずに jQueryを使用しています。

ありがとうございます

どのように解決するのですか？

あなたは MutationObserver が必要です。このスニペットでは setTimeout を使用して、属性の変更をシミュレートしています。

var element = document.querySelector('#test');
setTimeout(function() {
  element.setAttribute('data-text', 'whatever');
}, 5000)

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") {
      console.log("attributes changed")
    }
  });
});

observer.observe(element, {
  attributes: true //configure it to listen to attribute changes
});

<div id="test">Dummy Text</div>