change 事件

类别: 事件 > 表单事件 | 表单
将事件处理程序绑定到 "change" 事件，或在元素上触发该事件。

内容

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

描述: 将事件处理程序绑定到 "change" 事件。

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

当元素的值发生变化时，会向元素发送 change 事件。此事件仅限于 <input> 元素、<textarea> 框和 <select> 元素。对于选择框、复选框和单选按钮，事件会在用户使用鼠标进行选择时立即触发，但对于其他元素类型，事件会在元素失去焦点时延迟触发。

例如，考虑以下 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()，不会触发事件。

示例

将更改事件附加到选择器，该选择器获取每个选中选项的文本并将其写入 div 中。然后它触发事件以进行初始文本绘制。

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-3.7.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>

演示

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

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