gpt4 book ai didi

javascript - 触发 "onchange"事件

转载 作者:可可西里 更新时间:2023-11-01 01:23:04 25 4
gpt4 key购买 nike

“onchange”事件仅在用户输入某个值时触发。当我通过 Javascript 自动更改值时,为什么无法触发事件?有替代方案吗?

动画:

enter image description here

代码:

<!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 在现代浏览器上触发合成事件。 . More here .

因此在您的具体示例中:

input.value = "Another example";
var event = document.createEvent("UIEvents"); // See update below
event.initUIEvent("change", true, true); // See update below
input.dispatchEvent(event);

Live demo

更新:作为Benjamin noted ,自从上面写完之后,initUIEvent 已经替换为 UIEvent 构造函数,所以这将是:

input.value = "Another example";
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
input.dispatchEvent(event);

Live demo

或者,您始终可以直接调用绑定(bind)到 change 事件的任何函数,这通常是我所做的。但有时您想要使用实际事件(例如,当使用观察者模式时)并确保通知正在监听更改的任何人。

关于javascript - 触发 "onchange"事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8789423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com