change

Das change Event wird von <input>, <select>, und <textarea> Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum input Event wird das change Event nicht bei jeder Änderung der value Eigenschaft ausgelöst.

General info

Specification: HTML5
Interface: Event
Bubbles: Yes
Cancelable: No
Target: Element
Default Action: undefined

Eigenschaften

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`boolean`	Does the event normally bubble?
`cancelable` Read only	`boolean`	Is it possible to cancel the event?

Beschreibung

Das change Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:

Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <input type="radio"> und <input type="checkbox">;
Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines <select>'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <input type="date">, beim Auswählen einer Datei im File Picker für <input type="file">, etc.);
Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines <textarea> oder <input type="text">).

Verschiedene Webbbrowser unterscheiden sich darin, ob das change Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in <select> Elementen zum Beispiel lösen das change event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <select> (see Bug 126379) Element nimmt.

Die HTML Spezifikation listet die <input> Typen, welche das change Event auslösen können.

Beispiele

Ein unvollständiges Beispiel auf jsfiddle: https://jsfiddle.net/nfakc/5/, welches möglicherweise nich in allen Webbrowsern funktioniert.

Beispiel: Change Event auf einem `select`

Der folgende Code behandelt das change Event eines select durch den Aufruf der changeEventHandler Funktion im onchange Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.

<html>
  <head>
    <title>Example: Change event on a select</title>
    <script type="text/javascript">
      function changeEventHandler(event) {
        alert('You like ' + event.target.value + ' ice cream.');
      }
    </script>
    </head>
    <body>
        <label>Choose an ice cream flavor: </label>
        <select size="1" onchange="changeEventHandler(event);">
            <option>chocolate</option>
            <option>strawberry</option>
            <option>vanilla</option>
        </select>
    </body>
</html>

Siehe auch

NetworkInformation.connection löst das change Event aus, wenn sich die Informationen zur Verbindung verändern.

Laut QuirksMode sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.