Wie erzwinge ich programmgesteuert ein Änderungsereignis für eine Eingabe?

Wie erzwinge ich programmgesteuert ein Änderungsereignis für eine Eingabe?

Ich habe so etwas versucht:

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

Aber mein Endziel ist es, alle Listener-Funktionen auszulösen, und das scheint nicht zu funktionieren. Es wird auch nicht nur das Attribut 'value' aktualisiert.

Erstellen Sie ein EventObjekt und übergeben Sie es an die dispatchEventMethode des Elements:

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

Dadurch werden Ereignis-Listener ausgelöst, unabhängig davon, ob sie durch Aufrufen der addEventListenerMethode oder durch Festlegen der onchangeEigenschaft des Elements registriert wurden .

Wenn Sie möchten, dass das Ereignis sprudelt, müssen Sie dem EventKonstruktor ein zweites Argument übergeben :

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

Informationen zur Browserkompatibilität:

• dispatchEvent ()
• Veranstaltung()

In jQuery verwende ich meistens:

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

ugh benutze eval für nichts . Nun, es gibt bestimmte Dinge, aber sie sind äußerst selten. Sie würden dies eher tun:

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

Weitere Optionen finden Sie hier: http://jehiah.cz/archive/firing-javascript-events-properly

Aus irgendeinem Grund löst ele.onchange () im IE auf meiner Seite eine Ausnahme "Methode nicht gefunden" für mich aus. Daher habe ich diese Funktion über den von Kolten bereitgestellten Link verwendet und fireEvent (ele, 'change') aufgerufen, was funktioniert hat ::

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);
    }
}

Ich habe jedoch eine Testseite erstellt, auf der bestätigt wurde, dass der Aufruf von onchange () funktionieren sollte:

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

Bearbeiten: Der Grund, warum ele.onchange () nicht funktioniert hat, war, dass ich für das Ereignis onchange nichts deklariert habe. Aber das fireEvent funktioniert immer noch.

Dies ist die richtigste Antwort für IE und Chrome ::

javascript=>

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

Entnommen aus dem unteren Bereich von 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);
    }
}

Sie können das $ .browser-Zeug natürlich durch Ihre eigenen Browser-Erkennungsmethoden ersetzen, um es jQuery unabhängig zu machen.

So verwenden Sie diese Funktion:

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

Dies wird im Grunde das echte DOM-Ereignis auslösen, als ob sich tatsächlich etwas geändert hätte.

Wenn Sie alle Ihre Ereignisse mit diesem Codeausschnitt hinzufügen:

//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){...});

Dann können Sie einfach verwenden, element.on<EVENTNAME>()wo <EVENTNAME>der Name Ihres Ereignisses steht, und das ruft alle Ereignisse mit auf<EVENTNAME>

Zum Auslösen eines Ereignisses in Javascript.

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

Wenn Sie jQuery verwenden, haben Sie:

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

oder MS AJAX:

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

Oder im rohen HTML des Elements:

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

Nachdem ich die Frage noch einmal gelesen habe, glaube ich, dass ich falsch gelesen habe, was zu tun war. Ich habe noch nie eine Möglichkeit gefunden, ein DOM-Element so zu aktualisieren, dass ein Änderungsereignis erzwungen wird. Am besten haben Sie eine separate Ereignishandlermethode wie die folgende:

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

Da Sie bereits eine JavaScript-Methode schreiben, die die Änderung vornimmt, muss nur eine zusätzliche Zeile aufgerufen werden.

Oder, wenn Sie sind die Microsoft AJAX - Framework verwenden , können Sie alle Event - Handler Zugriff über:

$get('elementId')._events

Es würde Ihnen ermöglichen, einige Reflexionsarbeiten durchzuführen, um die richtigen Event-Handler zum Auslösen zu finden.

Mit JQuery können Sie Folgendes tun:

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

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