JavaScript: прислушиваться к изменению атрибута?

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

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

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

function doit() {

}

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

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

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

Спасибо


javascript event-handling attributes custom-events
person Manngo    schedule 02.01.2017    source источник
comment
MutationObserver для этого работает. Просто настройте его для прослушивания изменений атрибутов. Установите его так, чтобы он наблюдал только за интересующим вас элементом.   -  person Sebastian Simon    schedule 02.01.2017

Ответы (1)


arrow_upward
117
arrow_downward

Вам понадобится 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>

person Satpal    schedule 02.01.2017
comment
Спасибо за ответ и за образец. Я думаю, что после того, как я это оптимизирую, это будет хороший метод для внесения более сложных изменений в элементы, просто изменяя и атрибут. Это упрощает API. Знаете ли вы о разумном полифилле для примитивных браузеров? - person Manngo; 02.01.2017
comment
@Manngo, для примитивных браузеров можно использовать События мутации, а также см. davidwalsh.name/dom-events-javascript. - person Satpal; 02.01.2017
comment
Я вижу, что в настоящее время он поддерживается в IE9 и все еще поддерживается в современных браузерах. Спасибо еще раз. - person Manngo; 02.01.2017