Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

change

change事件在<input>, <select>, 和<textarea> 元素的value由于用户的输入而发生变化时被触发. 和input事件不同, change事件不会不必要地对于每次value的改变而被触发.

基本信息

标签
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: 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.

文档标签和贡献者

 此页面的贡献者: azhi09, ziyunfei, charlie
 最后编辑者: azhi09,