.change()

类别：事件 > 表单事件 | 表单

.change( handler )返回类型：jQuery

描述：把一个事件绑定到“change”JavaScript事件，或者在一个元素上触发该事件。

此方法在前两种变体中是.on( "change", handler )的简写，在第三种变体中是.trigger( "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" ).change(function() {
  alert( "Handler for .change() called." );
});

现在，当从下拉菜单中选中第二个选项时，显示了警告框。如果你改变了文本域中的文本，然后在别处单击，也会显示警告框。如果文本域失去了焦点，但是内容没有改变，就不会触发此事件。若要手工触发此事件，请应用.change()而不带参数：

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

执行此代码后，在Trigger the handler上点击也将弹出警告消息。此消息将显示两次，因为处理函数被绑定到两个表单元素的change事件上了。

自从jQuery 1.4以来，change事件会在Internet Explorer 中冒泡，行为与其它现代浏览器中的此事件一致。

注意：利用JavaScript脚本改变输入元素的值，例如利用.val()，将不会引发此事件。

补充说明：

  • 因为.change()方法是.on( "change", handler )方法的简写，所以可以利用.off( "change" )来分离。

示例：

把change事件附加到下拉菜单以取得每个选中的选项的文本，并把它们写入到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>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
 
</body>
</html>

演示：

若要把校验测试添加到所有的文本输入元素上：

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