Question

仅当USER输入某个值时才会触发“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>

由于

Answer 1

绝大多数情况下，您不希望在使用代码更改值时触发事件。在您这样做的情况下，您可以通过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

或者，您可以随时直接调用您绑定到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

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

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

Answer 4

Crowder的代码只给了我一个TypeError（UIEvent.initUIEvent的参数不够）。将其更改为：

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

它有效。

触发“onchange”事件

4 个答案: