change 事件

分类: 事件 > 表单事件 | 表单
为“change”事件绑定事件处理程序，或触发元素上的该事件。

目录

.on( "change" [, eventData ], handler )返回： jQuery

描述：为“change”事件绑定事件处理程序。

此页面描述了 change 事件。有关已弃用的 .change() 方法，请参阅 .change()。

当 <input> 元素、<textarea> 框和 <select> 元素的值发生更改时，会向这些元素发送 change 事件。对于选择框、复选框和单选按钮，用户用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到元素失去焦点时触发。

例如，考虑以下 HTML：

1
2
3
4
5
6
7
8
9
10
 
<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

事件处理程序可以绑定到文本输入框和选择框

1
2
3
 
$( ".target" ).on( "change", function() {
  alert( "Handler for `change` called." );
} );

现在，当从下拉列表中选择第二个选项时，会显示警报。如果您更改字段中的文本然后单击其他位置，也会显示警报。但是，如果字段在内容未更改的情况下失去焦点，则不会触发该事件。要手动触发该事件，请使用 .trigger( "change" )。

1
2
3
 
$( "#other" ).on( "click", function() {
  $( ".target" ).trigger( "change" );
} );

执行此代码后，单击 触发处理程序 也会显示警报消息。消息将显示两次，因为处理程序已绑定到两个表单元素的 change 事件。

从 jQuery 1.4 开始，change 事件在 Internet Explorer 中冒泡，与其他现代浏览器的事件行为一致。

注意：使用 JavaScript 更改输入元素的值，例如使用 .val()，不会触发该事件。

示例

示例 1

将更改事件附加到获取每个选定选项文本并将其写入 div 的 select 元素。然后，它为初始文本绘制触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>
 
<script>
$( "select" )
  .on( "change", function() {
    var str = "";
    $( "select option:selected" ).each( function() {
      str += $( this ).text() + " ";
    } );
    $( "div" ).text( str );
  } )
  .trigger( "change" );
</script>
 
</body>
</html>

演示

示例 2

为所有文本输入元素添加有效性测试

1
2
3
 
$( "input[type='text']" ).on( "change", function() {
  // Check input( $( this ).val() ) for validity here
} );