觸發“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