web-dev-qa-db-ja.com

JavaScript：属性の変更をリッスンしますか？

JavaScriptで属性値の変更をリッスンすることはできますか？例えば：

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

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

function doit() {

}

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

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

これをやりたいwithout jQuery。

ありがとう

javascriptattributesevent-handlingcustom-events
23
Manngo

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>
43
Satpal