"onchange"イベントをトリガーする

"onchange"イベントは、USERが何らかの値を入力したときにのみトリガーされます。 Javascriptを使用して値を自動的に変更すると、イベントを発生させることができないのはなぜですか？代わりがありますか？"onchange"イベントをトリガーする

アニメーション：

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>

おかげ

出典

2012-01-09 Caio

値を変更した後、手動でイベントを発生させる必要があります。この質問を参照してください：http://stackoverflow.com/q/2490825/615754 – nnnnnn

javascriptで入力値を変更すると、何もイベントが発生しません。なぜあなたはonchangeを使いたいのですか？ onchangeはユーザーの入力用で、残りの部分は自分で処理することができます。 – ggzone

時間の大半は、イベントが発生することにしたくありませんあなたがコードで値を変更するとき。そのような場合は、現代のブラウザで合成イベントをdispatchEvent経由で発生させることができます。 More here。あなたの具体的な例ではそう

：

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); // See update below 
event.initUIEvent("change", true, true);  // See update below 
input.dispatchEvent(event);

Live demo

更新：Benjamin notedよう以上が書かれていたので、それは次のようになりますので、initUIEventは、UIEventコンストラクタに置き換えられました：

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

Live demo

代わりに、あなたはいつもchangeイベントにバインドした機能を直接呼び出すことができます。これは通常はやりたいことです。しかし、実際のイベント（オブザーバーパターンを使用する場合など）を使用して、変更をリスニングしているユーザーに通知するようにしたい場合があります。

出典

2012-01-09 13:56:23

私はあなたの更新された答えを使用しています、それは魅力のように動作しますが、私のアプリが遅すぎる、jqueryのトリガー（）、その高速で行われたときと同じアクション。理由は何でしょうか？どのようにパフォーマンスを向上させることができますか？この – Abhinav

値を変更する場合、値が変更されたときに、実際のトリガーイベントハンドラから呼び出された独自のメソッドを呼び出すことはできません？

EDIT：そうでない場合、実際にFireが発生する必要がある場合は、手動でイベントを手動で送信することもできます。

出典

2012-01-09 13:59:37 OnResolve

写真：あなたは5つの入力を更新する1つの機能を持っているが、変更された各入力は異なる機能を呼び出す必要がありますが、IDといただきました！他を知ることができませんので、すべてがダイナミックな..です最良の方法は、各変更リスナーを追加しています述べたように、 'initUIEvent'はWeb標準から非推奨と削除されたことを – bakz

Crowderのコードでは、TypeError（UIEvent.initUIEventの引数が不足しています）しか表示されませんでした。これに変更してください：

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

となります。 developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

は、これはdoesnのことを除いて同じである」：initUIEventが述べたようにWeb標準から非推奨と削除されたことを

出典

2014-01-28 00:20:19 Malte

注意、それが必要とする機能を呼び出す入力：https://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);

出典

2015-07-07 10:50:19

"onchange"イベントをトリガーする

答えて

関連する問題