.change()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.change()

分类:事件 > 表单事件 | 表单

返回: jQuery

.change( handler )

描述:把某个事件处理函数绑定到JavaScript事件“change”上,或者在某个元素上触发该事件。

加入于: 1.0
.change( handler )
  • handler
    类型:FunctionEvent eventObject )
    一个函数,每次事件被触发时执行它。
加入于: 1.4.3
.change( [eventData ], handler )
  • eventData
    类型:Anything
    一个对象,它包含了将要传递给事件处理函数的数据。
  • handler
    类型:FunctionEvent eventObject )
    一个函数,每次事件触发时执行它。
加入于: 1.0
.change()

该签名不能接受任何参数。

在前两种变体中,该方法是.on( "change", handler )的简写,在第三种变体中,是.trigger( "change" )的简写。

当某个元素的值改变的时候,该change事件被发送到这个元素。该事件被限制到<input>元素、<textarea>文本输入框和<select>元素上。对于下拉选框、勾选框和单选钮,该事件会在用户用鼠标作了一个选择之后立即引发,但是对于别的元素类型,事件会推迟到元素失去焦点之后才引发。

举个例子,设想下面的HTML:

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

事件处理函数被绑定到文本输入框和选择框上:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

现在当从下拉菜单中选中第二个选项时,出现了提醒。如果你改变文本输入域中的文本,并在别的地方点击,它也会出现。然而,如果文本域失去焦点的同时,它的内容没有改变,就不会触发该事件。要想人为触发该事件,请应用不带参数的.change()

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

在执行这条代码之后,点击“Trigger the handler”也会跳出提醒消息。该消息会出现两次,因为处理函数也被绑定到两个表单元素的change事件上了。

自从jQuery 1.4,change事件会在Internet Explorer中冒泡,行为与别的现代浏览器一致。

注意:使用JavaScript改变<input>元素的值,比如说使用.val()方法改变化,不会引发该事件。

其它说明

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

示例

把一个change事件附加到<select>上,以获得每个被选中的选项的文本文件,并把它们写到div中。然后它触发了初始化文本绘制的事件

<!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>

演示结果

向所有的文本输入元素添加一个有效性校验测试

$( "input[type='text']" ).change(function() {
  // 在这里检查input( $( this ).val() ),看看是否有效
});

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/change.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。