.change()
.change( handler )
描述:把某个事件处理函数绑定到JavaScript事件“change”上,或者在某个元素上触发该事件。
- eventData类型:Anything一个对象,它包含了将要传递给事件处理函数的数据。
- handler一个函数,每次事件触发时执行它。
该签名不能接受任何参数。
在前两种变体中,该方法是.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() ),看看是否有效 });