触发“onchange”事件

Question

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

动画片：

在此处输入图片说明

代码：

<!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>

谢谢

Answer 1

大多数情况下，您不希望在使用代码更改值时触发事件。 在这些情况下，您可以通过dispatchEvent在现代浏览器上触发合成事件。 更多在这里。

所以在你的具体例子中：

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构造函数替换，因此将是：

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

现场演示

或者，你总是可以直接调用你绑定到change事件的任何函数，这通常是我会做的。 但有时您想使用实际事件（例如，在使用观察者模式时）并确保任何正在侦听更改的人都得到通知。

Answer 2

请注意， initUIEvent已被弃用并从 Web 标准中删除，如下所述：developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

除了不使用initUIEvent之外，这是相同的：

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

Answer 3

Crowder 的代码只给了我一个类型错误（UIEvent.initUIEvent 没有足够的参数）。 改成这样：

input.value = "Another example";
var event = document.createEvent("UIEvents");
event.initUIEvent("change", true, true, window, 1);
input.dispatchEvent(event);

它有效。

Answer 4

如果您正在以编程方式更改值，那么您已经知道何时发生这种情况，也就是说您不能在更改值时调用自己的方法（可能与从实际触发器事件处理程序调用的方法相同）？

编辑：否则，如果您特别需要发生实际的火灾，您也可以自己手动调度事件。

触发“onchange”事件

问题描述

4 个解决方案

解决方案1
23 已采纳 2012-01-09 13:56:23

解决方案2
4 2015-07-07 10:50:19

解决方案3
1 2014-01-28 00:20:19

解决方案4
1 2012-01-09 13:59:37

触发“onchange”事件

问题描述

4 个解决方案

解决方案1 23 已采纳 2012-01-09 13:56:23

解决方案2 4 2015-07-07 10:50:19

解决方案3 1 2014-01-28 00:20:19

解决方案4 1 2012-01-09 13:59:37

解决方案1
23 已采纳 2012-01-09 13:56:23

解决方案2
4 2015-07-07 10:50:19

解决方案3
1 2014-01-28 00:20:19

解决方案4
1 2012-01-09 13:59:37