change
Das change
Event wird von <input>
, <select> (en-US), und <textarea> (en-US) Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum input (en-US)
Event wird das change
Event nicht bei jeder Änderung der value
Eigenschaft ausgelöst.
General info
Eigenschaften
Property | Type | Description |
---|---|---|
target Schreibgeschützt |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Schreibgeschützt |
DOMString |
The type of event. |
bubbles Schreibgeschützt |
Boolean |
Whether the event normally bubbles or not. |
cancelable Schreibgeschützt |
Boolean |
Whether the event is cancellable or not. |
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> (en-US)'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> (en-US) 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> (en-US) 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
(en-US) 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.