Wie kann ich ein onchange-Ereignis manuell auslösen?

I'm Einstellung ein Datum-Zeit-Textfeld-Wert über ein Kalender-Widget. Offensichtlich tut das Kalender-Widget etwas wie dieses:

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

Was ich möchte ist: Wenn sich der Wert im Datums-/Zeit-Textfeld ändert, muss ich einige andere Felder auf der Seite zurücksetzen. Ich habe einen onchange-Ereignis-Listener zum datetimetext-Feld hinzugefügt, der nicht ausgelöst wird, weil ich vermute, dass onchange nur ausgelöst wird, wenn das Element den Fokus erhält & sein Wert wird beim Verlust des Fokus geändert.

Daher bin ich auf der Suche nach einem Weg, um dieses "onchange"-Ereignis manuell auszulösen (was ich denke, sollte die Überprüfung der Wertdifferenz im Textfeld übernehmen).

Irgendwelche Ideen?

Lösung

Es gibt mehrere Möglichkeiten, wie Sie dies tun können. Wenn der "onchange"-Listener eine Funktion ist, die über die "element.onchange"-Eigenschaft festgelegt wurde, und Sie sich nicht um das Ereignisobjekt oder die Blasenbildung/Propagation kümmern, ist die einfachste Methode, einfach diese Funktion aufzurufen:

element.onchange();

Wenn Sie das echte Ereignis vollständig simulieren wollen, oder wenn Sie das Ereignis über das html-Attribut oder addEventListener/attachEvent setzen, müssen Sie ein wenig Feature Detection betreiben, um das Ereignis korrekt auszulösen:

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

[MDN] (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) deutet darauf hin, dass es eine viel sauberere Methode gibt, dies in modernen Browsern zu tun:

// 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);
Kommentare (12)

Für diejenigen, die jQuery verwenden, gibt es eine praktische Methode: http://api.jquery.com/change/

Kommentare (3)