2017-01-02 62 views
8

Czy w języku JavaScript można nasłuchiwać zmiany wartości atrybutu? Na przykład:JavaScript: Słuchaj zmiany atrybutu?

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

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

function doit() { 

} 

chciałbym odpowiedzieć na wszelkie zmiany w atrybucie something.

Przeczytałem na obiekcie MutationObserver, a także alternatywne dla tego (w tym ten, który korzysta z wydarzeń animacji). O ile wiem, dotyczą one zmian w rzeczywistym modelu DOM. Bardziej interesują mnie zmiany atrybutów w konkretnym elemencie DOM, więc nie sądzę, że to jest to. Z pewnością w moim eksperymentowaniu nie wydaje się działać.

Chciałbym zrobić to bez jQuery.

Dzięki

+0

'MutationObserver' pracuje dla tego. Wystarczy go skonfigurować, aby odsłuchać zmiany atrybutów. Ustaw, aby obserwować tylko element, który cię interesuje. – Xufox

Odpowiedz

14

Trzeba MutationObserver tu, w fragmencie Użyłem setTimeout symulować modyfikując atrybut

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 
 

 
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"> 
 
</div>

+0

Dzięki za odpowiedź i za próbkę. Po usprawnieniu tego, myślę, że będzie to dobra technika do wprowadzania bardziej złożonych zmian w elementach poprzez zwykłą zmianę i atrybutowanie. Ułatwia API. Czy zdajesz sobie sprawę z rozsądnej polyfill dla prymitywnych przeglądarek? – Manngo

+0

@Manngo, Dla prymitywnych przeglądarek możesz użyć [Mutation events] (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events), a także https://davidwalsh.name/ dom-events-javascript – Satpal

+0

Widzę, że jest on obecnie wspierany z powrotem do IE9 i nadal jest obsługiwany w nowoczesnych przeglądarkach. Dzięki jeszcze raz. – Manngo

Powiązane problemy