web-dev-qa-db-ja.com

「onchange」イベントをトリガーする

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

ありがとう

javascripttriggersonchange
17
Caio

ほとんどの場合、コードで値を変更したときにイベントが発生することは望ましくありません。そのような場合は、 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イベントにバインドした関数をいつでも直接呼び出すことができます。これは、通常、私が行うことです。ただし、実際のイベントを使用して（たとえば、オブザーバーパターンを使用する場合）、変更をリッスンしているすべての人に通知するようにしたい場合があります。

22
T.J. Crowder

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);
4
Benjamin Intal

値をプロガンマ的に変更する場合、これがいつ発生するかはすでにわかっています。値を変更するときに、独自のメソッド（実際のトリガーイベントハンドラーから呼び出されるのと同じ）を呼び出すことができないとはどういうことですか？

編集：それ以外の場合、実際の火災を発生させる必要がある場合は、手動でイベントをディスパッチすることもできます。

1
OnResolve

CrowderのコードはTypeErrorしか与えませんでした（UIEvent.initUIEventへの十分な引数がありません）。これに変更します：

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

そしてそれは動作します。

1
Malte