[英]How to detect change in a property of DOM?
当我在选择框中更改项目时,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属性的变化?
我认为您可以尝试2种方法:
第一种是手动处理on change事件,而不考虑事件冒泡或传播,然后在更改元素的值后立即调用onchange
。 像这样:
var myEle = document.getElementById("hoge");
myEle.value = 1; // <- (1)
myEle.onchange()
第二是使它自然地像浏览器一样工作,然后尝试在该元素上创建和调度事件。 像这样:
if ("createEvent" in document) {
var event = document.createEvent("HTMLEvents");
event.initEvent("change", false, true);
myEle.dispatchEvent(event);
} else
myEle.fireEvent("onchange");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.