触发“onchange"事件 [英] Trigger "onchange" event
问题描述
onchange"事件仅在用户输入某个值时触发.为什么当我通过 Javascript 自动更改值时无法触发事件?有替代品吗?
The "onchange" event is triggered only when the USER enters some value. Why isn't possible to fire the event when I change the value automatically via Javascript ? Is there an alternative ?
动画:
代码:
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener ("DOMContentLoaded", function () {
var input = this.getElementsByTagName ("input")[0];
var div = this.getElementsByTagName ("div")[0];
var i = 0;
var seconds = 5;
div.innerHTML = "The following input should fire the event in " + seconds + " seconds";
var interval = window.setInterval (function () {
i ++;
if (i === seconds) {
window.clearInterval (interval);
input.value = "Another example";
div.innerHTML = "Nothing ! Now try change the value manually";
}
else {
div.innerHTML = "The following input should fire the event in " + (seconds - i) + " seconds";
}
}, 1000);
input.addEventListener ("change", function () {
alert ("It works !");
}, false);
}, false);
</script>
<style>
body {
padding: 10px;
}
div {
font-weight: bold;
margin-bottom: 10px;
}
input {
border: 1px solid black;
border-radius: 3px;
padding: 3px;
}
</style>
<title>Event</title>
</head>
<body>
<div></div>
<input type = "text" value = "Example" />
</body>
</html>
谢谢
推荐答案
在绝大多数情况下，您不希望在使用代码更改值时触发事件.在这些情况下，您可以通过 在现代浏览器上触发合成事件dispatchEvent.更多信息.
The vast majority of the time, you don't want an event to be fired when you change the value with code. In those cases where you do, you can fire a synthetic event on modern browsers via dispatchEvent. More here.
所以在你的具体例子中:
So in your specific example:
input.value = "Another example";
var event = document.createEvent("UIEvents"); // See update below
event.initUIEvent("change", true, true); // See update below
input.dispatchEvent(event);
更新:正如Benjamin 指出，既然上面写好了，initUIEvent 已被替换为 UIEvent 构造函数，这样就可以:
Update: As Benjamin noted, since the above was written, initUIEvent has been replaced with the UIEvent constructor, so that would be:
input.value = "Another example";
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
input.dispatchEvent(event);
或者，您始终可以直接调用绑定到 change 事件的任何函数，这通常是我要做的.但有时您想使用实际事件(例如，在使用观察者模式时)并确保任何正在侦听更改的人都收到通知.
Alternately, you can always just call whatever function you've bound to the change event directly, which is usually what I'd do. But sometimes you want to use actual events (for instance, when using the observer pattern) and ensure that anyone who is listening for the change is notified.
这篇关于触发“onchange"事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
