web-dev-qa-db-fra.com

JavaScript: Écouter le changement d'attribut?

Est-il possible en JavaScript d'écouter un changement de valeur d'attribut? Par exemple:

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

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

function doit() {

}

J'aimerais réagir à tout changement dans l'attribut something.

J'ai lu sur l'objet MutationObserver, ainsi que des alternatives à celui-ci (y compris celui qui utilise des événements d'animation). Autant que je sache, il s’agit de modifications apportées au DOM actuel. Je suis plus intéressé par les modifications d’attributs à un élément DOM particulier, donc je ne pense pas que ce soit le cas. Certes, dans mes expériences, cela ne semble pas fonctionner.

Je voudrais faire ceci sans jQuery.

Merci

javascriptattributesevent-handlingcustom-events
23
Manngo

Vous avez besoin de MutationObserver , Ici, dans l'extrait de code, j'ai utilisé setTimeout pour simuler l'attribut de modification

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