web-dev-qa-db-ja.com

オンチェンジイベントを手動でトリガーするにはどうすればよいですか？

私はカレンダーウィジェットを介して日付と時刻のテキストフィールド値を設定しています。明らかに、カレンダーウィジェットはこのようなことをします：

document.getElementById('datetimetext').value = date_value;

欲しいのは、date-time textfieldの値を変更するときに、ページ内の他のいくつかのフィールドをリセットする必要があるということです。トリガされていないdatetimetextフィールドにonchangeイベントリスナを追加しました。なぜならonchangeは要素がフォーカスを取得し、フォーカスが失われたときにその値が変更されたときにのみトリガされると思います。

したがって、私は手動でこのonchangeイベントをトリガーする方法を探しています（私はテキストフィールドの値の違いをチェックするように気をつけるべきだと思います）。

何か案は ？

javascriptjavascript-eventsevent-handling
332
CodeTweetie

これを行うにはいくつかの方法があります。 onchangeリスナーがelement.onchangeプロパティで設定された関数であり、イベントオブジェクトやバブリング/伝播に悩まされていないのなら、最も簡単な方法はその関数を呼び出すことです。

element.onchange();

実際のイベントを完全にシミュレートする必要がある場合、またはhtml属性またはaddEventListener/attachEventを介してイベントを設定する場合は、イベントを正しく起動するために少し機能を検出する必要があります。

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");
407
Andy E

_ mdn _ は、最近のブラウザでこれを行うためのはるかにクリーンな方法があることを示唆しています。

// Assuming we're listening for e.g. a 'change' event on `element`

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);
266
Milan Iliev

JQueryを使っている人には便利な方法があります： http://api.jquery.com/change/

14
Jacob Mouka