プログラムで入力のonchangeイベントを強制するにはどうすればよいですか？

プログラムで入力のonchangeイベントを強制するにはどうすればよいですか？

私はこのようなものを試しました：

var code = ele.getAttribute('onchange');
eval(code);

しかし、私の最終的な目標は、リスナー関数を起動することであり、それは機能しないようです。また、 'value'属性を更新するだけではありません。

Eventオブジェクトを作成しdispatchEvent、要素のメソッドに渡します。

var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

これにより、addEventListenerメソッドの呼び出しによって、またはonchange要素のプロパティの設定によって登録されたかどうかに関係なく、イベントリスナーがトリガーされます。

イベントをバブルしたい場合は、Eventコンストラクターに2番目の引数を渡す必要があります。

var event = new Event('change', { bubbles: true });

ブラウザーの互換性に関する情報：

• dispatchEvent（）
• イベント（）

jQueryでは主に次を使用します：

$("#element").trigger("change");

なにも evalを使わないでください。まあ、あることはありますが、それらは非常にまれです。むしろ、あなたはこれをするでしょう：

document.getElementById("test").onchange()

その他のオプションについては、こちらをご覧ください：http : //jehiah.cz/archive/firing-javascript-events-properly

何らかの理由でele.onchange（）がページのIEで「メソッドが見つかりません」という例外をスローしているため、Koltenが提供するリンクからこの関数を使用し、fireEvent（ele、 'change'）を呼び出しました。 ：

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

ただし、呼び出しはonchange（）が機能することを確認するテストページを作成しました。

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

編集：ele.onchange（）が機能しなかった理由は、実際にonchangeイベントに対して何も宣言していないためです。しかし、fireEventは引き続き機能します。

これはIEとChromeの最も正しい答えです。

javascript=>

var element = document.getElementById('xxxx');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);

QUnitの下部から取得

function triggerEvent( elem, type, event ) {
    if ( $.browser.mozilla || $.browser.opera ) {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem.dispatchEvent( event );
    } else if ( $.browser.msie ) {
        elem.fireEvent("on"+type);
    }
}

もちろん、jQueryに依存しないようにするために、$。browserを独自のブラウザー検出メソッドに置き換えることができます。

この機能を使用するには：

var event;
triggerEvent(ele, "change", event);

これは基本的に、何かが実際に変更されたかのように、実際のDOMイベントを発生させます。

このコードスニペットを使用してすべてのイベントを追加する場合：

//put this somewhere in your JavaScript:
HTMLElement.prototype.addEvent = function(event, callback){
  if(!this.events)this.events = {};
  if(!this.events[event]){
    this.events[event] = [];
    var element = this;
    this['on'+event] = function(e){
      var events = element.events[event];
      for(var i=0;i<events.length;i++){
        events[i](e||event);
      }
    }
  }
  this.events[event].push(callback);
}
//use like this:
element.addEvent('change', function(e){...});

次に、あなたのイベントの名前がelement.on<EVENTNAME>()どこであるかを使うことができ<EVENTNAME>ます、そしてそれはすべてのイベントを<EVENTNAME>

JavaScriptでイベントをトリガーするため。

 document.getElementById("yourid").addEventListener("change", function({
    //your code here
})

jQueryを使用している場合は、次のようになります。

$('#elementId').change(function() { alert('Do Stuff'); });

またはMS AJAX：

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

または、要素の生のHTMLで：

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

質問をもう一度読んだ後、私は何をすべきかを読み損なったと思います。changeイベントを強制する方法でDOM要素を更新する方法を見つけたことはありません。次のように、別のイベントハンドラーメソッドを用意するのが最善です。

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

変更を行うJavaScriptメソッドをすでに記述しているため、呼び出すのは1行だけです。

または、Microsoft AJAXフレームワークを使用している場合は、次の方法ですべてのイベントハンドラーにアクセスできます。

$get('elementId')._events

これにより、いくつかのリフレクションスタイルの処理を実行して、起動する適切なイベントハンドラを見つけることができます。

JQueryを使用すると、次のことができます。

// for the element which uses ID
$("#id").trigger("change");

// for the element which uses class name
$(".class_name").trigger("change");