触发“onchange”事件 [英] Trigger "onchange" event
问题描述
仅当USER输入某个值时才会触发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>
谢谢
推荐答案
绝大多数情况下，当您使用代码更改值时，不希望触发事件。在您这样做的情况下，您可以通过 <$ c在现代浏览器上发布合成事件。 $ C> 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);
更新：本杰明指出，由于上面写的， 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);
或者，您可以随时调用您绑定到更改的任何功能直接事件，这通常是我要做的事情。但有时您希望使用实际事件（例如，使用观察者模式时）并确保通知任何正在收听更改的人。
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屋！
