change

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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: http://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.

Webbrowserkompatibilität

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: spiegelp
 Zuletzt aktualisiert von: spiegelp,