HTMLElement: change-Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das change-Ereignis wird für <input>, <select> und <textarea> Elemente ausgelöst, wenn der Benutzer den Wert des Elements ändert. Im Gegensatz zum input-Ereignis wird das change-Ereignis nicht unbedingt bei jeder Änderung eines value-Wertes eines Elements ausgelöst.
Je nach Art des geänderten Elements und der Art und Weise, wie der Benutzer mit dem Element interagiert, wird das change-Ereignis zu unterschiedlichen Zeitpunkten ausgelöst:
- Wenn ein
<input type="checkbox">Element aktiviert oder deaktiviert wird (durch Klicken oder mit der Tastatur); - Wenn ein
<input type="radio">Element aktiviert wird (aber nicht beim Deaktivieren); - Wenn der Benutzer die Änderung explizit bestätigt (z.B. durch Auswahl eines Wertes aus einem Dropdown-Menü eines
<select>Elements mit einem Mausklick, durch Auswahl eines Datums aus einem Datumsauswahlfeld für<input type="date">, durch Auswahl einer Datei im Datei-Auswahlfenster für<input type="file">, etc.); - Wenn das Element den Fokus verliert, nachdem sein Wert geändert wurde: für Elemente, bei denen die Interaktion des Benutzers durch Tippen und nicht durch Auswahl erfolgt, wie bei einem
<textarea>oder dentext,search,url,tel,emailoderpasswordTypen des<input>Elements.
Die HTML-Spezifikation listet die <input>-Typen auf, die das change-Ereignis auslösen sollten.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("change", (event) => { })
onchange = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
<select>-Element
HTML
<label>
Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
JavaScript
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
Ergebnis
Texteingabefeld
Für einige Elemente, einschließlich <input type="text">, wird das change-Ereignis erst ausgelöst, wenn das Steuerelement den Fokus verliert. Versuchen Sie, etwas in das untenstehende Feld einzugeben und klicken Sie dann woanders hin, um das Ereignis auszulösen.
HTML
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # event-change |
| HTML # handler-onchange |
Browser-Kompatibilität
Loading…
Unterschiedliche Browser sind sich nicht immer einig, ob ein change-Ereignis für bestimmte Arten von Interaktionen ausgelöst werden sollte. Beispielweise wurde das change-Ereignis bei der Tastaturnavigation in <select>-Elementen in Gecko früher nie ausgelöst, bis der Benutzer Enter drückte oder den Fokus vom <select> entfernte (siehe Firefox-Bug 126379). Seit Firefox 63 (Quantum) ist dieses Verhalten jedoch zwischen allen großen Browsern konsistent.