change事件在<input>, <select>, 和<textarea> 元素的value由于用户的输入而发生变化时被触发. 和input事件不同, change事件不会不必要地对于每次value的改变而被触发.
基本信息
属性
| Property | Type | Description |
|---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not? |
描述
事件触发取决于表格元素的类型（type）和用户对标签的操作:
-
<input type="radio">和<input type="checkbox"> 的默认选项被修改时（通过点击或者键盘事件）; - 当用户完成提交动作时 (例如：点击了
<select>中的一个选项，从<input type="date">标签选择了一个日期，通过<input type="file">标签上传了一个文件，等); - 当标签的值被修改并且失焦后，但并未进行提交 (例如：对
<textarea>或者<input type="text">的值进行编辑后。).
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the <select> (see bug 126379).
The HTML specification lists the <input> types that should fire the change event.
Examples
An incomplete example, which probably doesn't work on all browsers, on jsfiddle: https://jsfiddle.net/nfakc/5/.
Example: Change event on a select
The following code handles the change event on a select by calling the changeEventHandler function in the onchange attribute. It reads the value of the event target and shows it in an alert.
<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>
See also
NetworkInformation.connection fires the change event when the connection information changes.
Browser Compatibility
According to QuirksMode Chrome and Firefox have been compatible for some time, but IE9 and earlier versions of IE10 have incomplete support.