HTMLElement: change — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("change", handler)

Beschreibung

Das change-Ereignis meldet, dass der Benutzer den Wert eines Formularelements verbindlich geändert hat. Anders als input wird es nicht bei jedem Tastendruck ausgelöst. Es kommt erst, wenn die Änderung abgeschlossen ist. Wann genau das der Fall ist, hängt vom Elementtyp ab:

Checkbox und Radio: sofort beim An- bzw. Abwählen (per Maus oder Tastatur).
<select>: sobald eine andere Option ausgewählt wurde.
type="file", type="date", type="color", type="range": sobald die Auswahl übernommen wurde. Bei range ist das meist das Loslassen des Reglers.
Text-Eingaben und <textarea>: erst wenn das Element den Fokus verliert und sich der Wert seit dem Fokussieren geändert hat. Bei <input> zusätzlich beim Drücken von Enter.

Das Ereignis ist ein einfaches Event (kein spezieller Untertyp). Es steigt auf (bubbles) und ist nicht abbrechbar. Weil es aufsteigt, eignet es sich gut für Event-Delegation: Ein einziger Listener auf dem <form> fängt die Änderungen aller enthaltenen Felder ab.

Sie registrieren das Ereignis entweder mit addEventListener("change", handler) oder über die Eigenschaft element.onchange = handler. Den neuen Wert lesen Sie im Handler über event.target.value aus, bei Checkboxen über event.target.checked.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"change"`.
$handler Pflicht	(event: Event) => void		Callback, der das `Event`-Objekt erhält. `event.target` ist das geänderte Formularelement.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `capture`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt mit bubbles: true und cancelable: false.

Beispiele

Auswahl in einem select auswerten

// HTML: <select id="land"><option value="de">Deutschland</option><option value="at">Österreich</option></select>
const select = document.querySelector('#land');

select.addEventListener('change', (event) => {
  const option = event.target.selectedOptions[0];
  console.log(`Gewählt: ${option.textContent} (${event.target.value})`);
});

Gewählt: Österreich (at)

Event-Delegation auf einem ganzen Formular

// Ein Listener für alle Felder des Formulars
const form = document.querySelector('#einstellungen');

form.addEventListener('change', (event) => {
  const field = event.target;
  const value = field.type === 'checkbox' ? field.checked : field.value;
  console.log(`${field.name} geändert:`, value);
  localStorage.setItem(field.name, JSON.stringify(value));
});

newsletter geändert: true

on-Property verwenden und Listener wieder entfernen

const agb = document.querySelector('#agb');
const submit = document.querySelector('#absenden');

// Variante 1: on-Property (überschreibt einen vorherigen Handler)
agb.onchange = () => {
  submit.disabled = !agb.checked;
};

// Variante 2: addEventListener + removeEventListener
const logChange = (e) => console.log('AGB akzeptiert:', e.target.checked);
agb.addEventListener('change', logChange);

// Später wieder abmelden
agb.removeEventListener('change', logChange);
agb.onchange = null;

AGB akzeptiert: true

Datei-Upload: gewählte Dateien anzeigen

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', () => {
  for (const file of fileInput.files) {
    console.log(`${file.name}: ${(file.size / 1024).toFixed(1)} KB`);
  }
  // Zurücksetzen, damit dieselbe Datei erneut change auslöst
  fileInput.value = '';
});

bericht.pdf: 245.3 KB

// Wichtig · Fallstricke

change oder input? Für Live-Feedback bei jedem Tastendruck, etwa für eine Suche beim Tippen oder eine Zeichenanzahl, brauchen Sie input. Bei Textfeldern feuert change erst beim Verlassen des Feldes.
Programmatische Änderungen wie el.value = 'x' oder el.checked = true lösen kein change aus. Wenn Sie das Ereignis brauchen, lösen Sie es selbst aus: el.dispatchEvent(new Event('change', { bubbles: true })).
Radio-Buttons: change kommt nur beim neu ausgewählten Button an, nicht beim abgewählten.
Datei-Inputs: Wird dieselbe Datei erneut gewählt, bleibt change aus, solange der Wert nicht zurückgesetzt wurde. Wird der Dialog abgebrochen, feuern moderne Browser das eigene Ereignis cancel.
contenteditable-Elemente lösen kein change aus. Verwenden Sie dort input.
onchange nimmt nur einen einzigen Handler auf. Eine neue Zuweisung überschreibt den alten. Mit addEventListener sind mehrere Handler möglich.
Browser-Unterstützung: Das Ereignis wird von allen Browsern unterstützt. Historisch gab es Unterschiede im Zeitpunkt, vor allem bei range und bei Checkboxen in altem Internet Explorer. Moderne Browser verhalten sich einheitlich.

Siehe auch

EventTarget.addEventListener() EventTarget.dispatchEvent() HTMLSelectElement HTMLInputElement HTMLElement: drag PreferenceObject: change