如何檢測DOM屬性的變化？

Question

當我在選擇框中更改項目時，DOM的屬性似乎已更改。 所以我下面的編碼：

<select id="hoge"> 
<option value="0">hoge</option> 
<option value="1">piyo</option> 
</select> 

<script> 
var hoge = document.getElementById("hoge").addEventListener("change", func, false); 
document.getElementById("hoge").value = 1; // <- (1) 

function func(e) { 
alert("Detected!"); 
} 
</script> 

在這種情況下，當我在選擇框更改項目，func被調用。但是當（1）被調用時，func不會被調用。 更改事件似乎只檢測到用戶提交。

所以我嘗試了MutationObserver。

<select id="hoge"> 
<option value="0">hoge</option> 
<option value="1">piyo</option> 
</select> 

<script> 
var hoge = new MutationObserver(function(mutations) { 
alert("Detected!"); 
}); 
hoge.observe(document.getElementById("hoge"), { attributes: true, subtree: true }); 
document.getElementById("hoge").options[1].setAttribute("selected", "selected"); // <- (1) 

</script> 

在這種情況下，當調用（1）時，調用func。但是，當我在選擇框中更改項目時，func不會被調用。 MutationObserver似乎只檢測屬性。

我想在任何一種情況下調用func。 如何通過腳本檢測DOM屬性中的更改？

Answer 1

我認爲有2種方法可以嘗試：
1日是手工處理上的變化時，不考慮事件泡沫或傳播，然後調用onchange你改變元素的值之後。像這樣：

var myEle = document.getElementById("hoge"); 
myEle.value = 1; // <- (1) 
myEle.onchange() 

第二是讓瀏覽器自然地工作，然後嘗試在該元素上創建和分派事件。就像這樣：*我要打電話FUNC在任何情況下*然後添加監聽兩個

if ("createEvent" in document) { 
    var event = document.createEvent("HTMLEvents"); 
    event.initEvent("change", false, true); 
    myEle.dispatchEvent(event); 
} else 
    myEle.fireEvent("onchange");