change()
为JavaScript 的"change"事件绑定一个处理函数,或者触发元素上的"change"事件。
.change(handler)
- handler类型: Function(Event eventObject)每当事件触发时执行的一个函数。
.change([eventData ], handler)
- eventData类型: Anything。一个对象,它包含的数据键值对映射将被传递给事件处理程序。
- handler类型: Function(Event eventObject)每当事件触发时执行的一个函数。
.change()
- 这个方法不接受任何参数
这个函数的前两个用法是.bind('change', handler)
的快捷方式,第3个不带参数的用法是.trigger('change')
的快捷方式。
一个元素的值改变的时候将触发change
事件。此事件仅限用于<input>
元素,<textarea>
和<select>
元素。对于下拉选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发,但对于其他类型的input元素,该事件触发将推迟,直到元素失去焦点才会触点。
举例来说,请看下面的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改变输入元素的值,例如使用.val()
,将不会触发该事件。
Additional Notes(其他注意事项):
.change()
方法只是作为.on("change", handler)
的一个速记写法,移除该事件可以使用.off("change")
。
例子
为 select 元素添加 change 事件,将选中的项目显示在 div 中。
<!DOCTYPE html> <html> <head> <style> div { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.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").change(function () {var str = ""; $("select option:selected").each(function () { str += $(this ).text() + " "; }); $("div").text(str); }) .change(); </script> </body> </html>
所有文本输入元素添加一个的有效性测试:
$("input[type='text']").change(function () { // check input ($(this).val()) for validity here });
<p><input type="text" value="" /> <span></span></p> <script> $("input[type='text']").change(function () { var str=$(this).val(); $(this).next("span").text(str); }); </script>