HTMLElement: change-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das change-Ereignis wird für <input>-, <select>- und <textarea>-Elemente ausgelöst, wenn ein Benutzer den Wert des Elements ändert. Anders als das input-Ereignis wird das change-Ereignis nicht unbedingt bei jeder Änderung des value eines Elements ausgelöst.

Wann das change-Ereignis ausgelöst wird, hängt von der Art des Elements und davon ab, wie der Benutzer mit ihm interagiert:

Wenn ein <input type="checkbox">-Element aktiviert oder deaktiviert wird (durch Klicken oder über die Tastatur);
wenn ein <input type="radio">-Element aktiviert wird (nicht jedoch, wenn es deaktiviert wird);
wenn der Benutzer die Änderung ausdrücklich bestätigt (z. B. indem er per Mausklick einen Wert aus der Dropdown-Liste eines <select>-Elements auswählt, im Datumsauswahlfeld ein Datum für <input type="date"> auswählt oder im Dateiauswahldialog eine Datei für <input type="file"> auswählt);
wenn das Element den Fokus verliert, nachdem sein Wert geändert wurde: Dies gilt für Elemente, bei denen der Benutzer einen Wert eintippt, statt ihn auszuwählen, etwa für <textarea> oder die Typen text, search, url, tel, email und password des <input>-Elements.

Die HTML-Spezifikation führt die <input>-Typen auf, die das change-Ereignis auslösen sollten.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle belegen:

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>

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

Bei einigen Elementen, darunter <input type="text">, wird das change-Ereignis erst ausgelöst, wenn das Steuerelement den Fokus verliert. Geben Sie etwas in das folgende Feld ein und klicken Sie anschließend an eine andere Stelle, um das Ereignis auszulösen.

HTML

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

Spezifikation
HTML # event-change
HTML # handler-onchange

Browser-Kompatibilität

Verschiedene Browser sind sich nicht immer einig, ob bei bestimmten Arten der Interaktion ein change-Ereignis ausgelöst werden sollte. Beispielsweise löste die Tastaturnavigation in <select>-Elementen in Gecko früher kein change-Ereignis aus, bis der Benutzer die Eingabetaste drückte oder den Fokus vom <select>-Element wegbewegte (siehe Firefox-Bug 126379). Seit Firefox 63 (Quantum) ist dieses Verhalten jedoch in allen gängigen Browsern einheitlich.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden