JavaScript：傾聽屬性更改？

JavaScript中可能偵聽屬性值的更改嗎？例如：JavaScript：傾聽屬性更改？

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

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

function doit() { 

}

我想回應something屬性中的任何更改。

我已經閱讀了MutationObserver對象以及該對象（包括使用動畫事件的對象）的替代方法。據我所知，他們是關於實際DOM的變化。我更感興趣的是對特定DOM元素的屬性更改，所以我不認爲就是這樣。當然在我的實驗中，它似乎並不奏效。

我想這樣做沒有 jQuery。

感謝

來源

2017-01-02 Manngo

'MutationObserver'適用於這一點。只需將其配置爲偵聽屬性更改即可。設置它只觀察你感興趣的元素。 – Xufox

你需要MutationObserver，這裏摘錄我已經使用setTimeout模擬修改屬性

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>

來源

2017-01-02 10:30:51 Satpal

感謝您的答案和樣本。一旦我簡化了這一點，我認爲這將是通過簡單的更改和屬性對元素進行更復雜更改的好技術。它使API更簡單。你會意識到原始瀏覽器的一個合理的polyfill嗎？ – Manngo

@Manngo，對於原始瀏覽器，您可以使用[突變事件]（https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events），也可以參閱https://davidwalsh.name/ dom-events-javascript – Satpal

我發現它目前支持IE9，現在的瀏覽器仍然支持它。再次感謝。 – Manngo

JavaScript：傾聽屬性更改？

回答

相關問題