change

change 事件被<input>, <select>, 和<textarea> 元素触发, 当用户提交对元素值的更改时。与  input 事件不同，change 事件不一定会对元素值的每次更改触发。

基本信息

规范
HTML5
接口
Event
冒泡
Yes
可取消
No
目标
Element
默认行为
undefined

属性

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

文档标签和贡献者