表单事件
focus与blur事件
focus与blur事件:不支持冒泡,focusin与focusout支持冒泡
focus()在元素本身产生,focusin()在元素包含的元素中产生,也就是:
<div>
<input type="text" />
</div>
input元素可以触发focus()事件,但是如果将focus()绑到div上,那么点击后没有反应。
<div class="aaron">
点击触发焦点(无反应):
<input type="text" />
</div>
<div class="aaron1">
点击触发焦点并冒泡:
<input type="text" />
</div>
$("input:first").focus(function(){
$(this).val('支持聚焦')
})
$(".aaron1").focusin(function() {
$(this).find('input').val('冒泡捕获了focusin事件')
})
当focusin和focuout绑在div上,点input的时候会一级一级的往上面查父元素,如果父元素有事件就执行了,所以看到了效果。这叫事件冒泡。
focus和blur是不支持事件冒泡,要想有反应只能将其绑定到input上。
change事件
触发的先后行为
- input元素:
监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。 - select元素:
对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发 - textarea元素:
多行文本输入框,当有改变时,失去焦点后触发change事件
select事件
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
select事件只能用于< input > 元素与< textarea > 元素
$("input").select(function(e){
alert(e.target.value)
})
submit事件
能触发submit事件的行为:
- < input type="submit" >
- < input type="image" >
- < button type="submit" >
- 当某些表单元素获取焦点时,敲击Enter(回车键)
form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为,jQuery中可以直接在函数中最后结尾return false即可
<form id="target2" action="destination.html">
<input type="text" value="输入新的值" />
<input type="submit" value="Go" />
</form>
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
});
这样页面就不会跳转到action指定页面。
作者:六月的余晖
出处:http://www.cnblogs.com/zhaozihan/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。