HTMLElement: change Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 des value eines Elements ausgelöst.

Je nachdem, welche Art von Element geändert wird und wie der Benutzer mit dem Element interagiert, wird das change-Ereignis zu einem unterschiedlichen Zeitpunkt ausgelöst:

  • Wenn ein <input type="checkbox"> Element aktiviert oder deaktiviert wird (durch Klicken oder Tastatureingabe);
  • Wenn ein <input type="radio"> Element aktiviert wird (aber nicht, wenn es deaktiviert wird);
  • Wenn der Benutzer die Änderung ausdrücklich bestätigt (z.B. durch das Auswählen eines Wertes aus der Dropdown-Liste eines <select> mit einem Mausklick, durch die Auswahl eines Datums aus einem Datumsauswahldialog für <input type="date">, durch die Auswahl einer Datei im Dateiauswahldialog 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 Eingaben erfolgt statt durch Auswahl, wie z.B. ein <textarea> oder die text, search, url, tel, email oder password-Typen 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 Ereignishandler-Eigenschaft.

js
addEventListener("change", (event) => {});

onchange = (event) => {};

Ereignistyp

Ein generisches Event.

Beispiele

<select>-Element

HTML

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

js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");

selectElement.addEventListener("change", (event) => {
  result.textContent = `You like ${event.target.value}`;
});

Ergebnis

Texteingabeelement

Für einige Elemente, einschließlich <input type="text">, wird das change-Ereignis erst ausgelöst, wenn die Kontrolle den Fokus verliert. Versuchen Sie, etwas in das untenstehende Feld einzugeben, und klicken Sie dann woanders hin, um das Ereignis auszulösen.

HTML

html
<input placeholder="Enter some text" name="name" />
<p id="log"></p>

JavaScript

js
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 Standard
# event-change
HTML Standard
# handler-onchange

Browser-Kompatibilität

BCD tables only load in the browser

Unterschiedliche Browser sind sich nicht immer einig, ob ein change-Ereignis für bestimmte Arten von Interaktionen ausgelöst werden sollte. Beispielsweise wurde die Tastatur-Navigation in <select>-Elementen im Gecko nicht als change-Ereignis ausgelöst, bis der Benutzer die Eingabe bestätigte oder den Fokus vom <select> entfernte (siehe Firefox Bug 126379). Seit Firefox 63 (Quantum) ist dieses Verhalten jedoch zwischen allen großen Browsern konsistent.