JavaScript: Прослушать изменение атрибута?

Возможно ли в JavaScript прослушивать изменение значения атрибута? Например:

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

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

function doit() {

}

Я хотел бы ответить на любое изменение в атрибуте something.

Я прочитал об объекте MutationObserver, а также об альтернативах этому (включая объект, который использует анимационные события). Насколько я могу судить, они касаются изменений в реальном DOM. Меня больше интересуют изменения атрибутов для конкретного элемента DOM, поэтому я не думаю, что это так. Конечно, в моих экспериментах это, похоже, не работает.

Я хотел бы сделать это без jQuery.

Спасибо

Ответы

Ответ 1

Вам нужен 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>