Событие триггера "onchange"

Событие "onchange" запускается только тогда, когда USER вводит какое-либо значение. Почему невозможно запустить событие, когда я автоматически меняю значение с помощью 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>

Спасибо

Ответы

Ответ 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);

Живая демонстрация

Обновление: Как Бенджамин отметил, поскольку выше было написано, initUIEvent был заменен конструктором UIEvent, поэтому это будет:

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

Живая демонстрация

В качестве альтернативы вы всегда можете просто вызвать любую функцию, которую вы связали с событием change напрямую, что обычно я делаю. Но иногда вы хотите использовать фактические события (например, при использовании шаблона наблюдателя) и следить за тем, чтобы любой, кто слушает изменение, уведомляется.

Ответ 2

Обратите внимание, что initUIEvent устарел и удален из веб-стандартов, как указано: 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);

Ответ 3

Если вы изменяете значение прогамматически, вы уже знаете, когда это происходит, что сказать, что вы не можете вызвать свой собственный метод (то же самое, возможно, вызывается из фактического обработчика события триггера), когда вы меняете значение?

EDIT: в противном случае, если вам действительно нужен фактический огонь, вы можете вручную отправить событие самостоятельно.

Ответ 4

Код Crowder только дал мне TypeError (недостаточно аргументов для UIEvent.initUIEvent). Измените его так:

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

и он работает.