Триггер "onchange" событие - PullRequest
Новая
       16

Триггер "onchange" событие

16 голосов
/ 09 января 2012

Событие «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>

Спасибо

Ответы [ 4 ]

21 голосов
/ 09 января 2012

В большинстве случаев вы не хотите, чтобы событие запускалось при изменении значения с помощью кода. В тех случаях, когда вы это делаете, вы можете запустить искусственное событие в современных браузерах через 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 напрямую, что обычно и делается. Но иногда вы хотите использовать реальные события (например, при использовании шаблона наблюдателя) и убедиться, что каждый, кто прослушивает изменение, уведомляется.

4 голосов
/ 07 июля 2015

Обратите внимание, что 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);
1 голос
/ 28 января 2014

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

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

, и это работает.

1 голос
/ 09 января 2012

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

РЕДАКТИРОВАТЬ: в противном случае, если вам конкретно необходим фактический пожар, вы также можете вручную отправить событие самостоятельно.

...