Daschange-Ereignis wird für<input>,<select> und<textarea> Elemente ausgelöst, wenn der Benutzer den Wert des Elements ändert. Im Gegensatz zuminput-Ereignis wird daschange-Ereignis nicht unbedingt bei jeder Änderung einesvalue-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 daschange-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,email oderpassword Typen des<input> Elements.

Die HTML-Spezifikation listetdie<input>-Typen auf, die daschange-Ereignis auslösen sollten.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("change", (event) => { })onchange = (event) => { }

Ereignistyp

Ein generischesEvent.

Beispiele

<select>-Element

HTML

<label>  Choose an ice cream flavor:  <select 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></div>

body {  display: grid;  grid-template-areas: "select result";}select {  grid-area: select;}.result {  grid-area: result;}

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 daschange-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></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

Browser-Kompatibilität

Unterschiedliche Browser sind sich nicht immer einig, ob einchange-Ereignis für bestimmte Arten von Interaktionen ausgelöst werden sollte. Beispielweise wurde daschange-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 (sieheFirefox-Bug 126379). Seit Firefox 63 (Quantum) ist dieses Verhalten jedoch zwischen allen großen Browsern konsistent.