JavaScript: Nghe thay đổi thuộc tính?

Question

Có thể trong JavaScript để nghe thay đổi giá trị thuộc tính không? Ví dụ:

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

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

function doit() { 

} 

Tôi muốn để đối phó với bất kỳ sự thay đổi trong các thuộc tính something.

Tôi đã đọc lên đối tượng MutationObserver, cũng như các lựa chọn thay thế cho đối tượng đó (bao gồm cả đối tượng sử dụng sự kiện hoạt ảnh). Theo như tôi có thể nói, chúng là về những thay đổi đối với DOM thực tế. Tôi quan tâm nhiều hơn đến các thay đổi thuộc tính đối với một phần tử DOM cụ thể, vì vậy tôi không nghĩ đó là điều đó. Chắc chắn trong thử nghiệm của tôi nó dường như không hoạt động.

Tôi muốn làm điều này mà không cần jQuery.

Cảm ơn

Answer 1

Bạn cần MutationObserver, đây trong đoạn tôi đã sử dụng để mô phỏng setTimeout sửa đổi thuộc tính

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>