表单事件是web开发中常用的事件,以jquery为例,梳理一下jquery的表单事件。
1、blur事件
为<input>元素,<textarea>失去焦点的时候触发的。
2、focus事件
为<input>元素,<textarea>获取焦点的时候触发的。
3、change事件
<input>,<textarea>和<select>的值都是可以发生改变的,可以通过change事件监听元素改变的动作,
input元素:监听input中value值的变化,当
value改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素:对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发。
textarea元素:多行文本输入框,当有改变时,失去焦点后触发change事件。
4、submit事件
提交表单在涉及到输入内容时会有很多业务场景,如登录、注册、修改密码、找回密码等情况。
<input type="submit"> 按回车是提交
<form action="aaaa.html" method="post">
<input type="text" name="" id="" value="" />
<input type="submit" value="提交操作"/>
</form>
<input type="image">
<form action="aaaa.html" method="post">
<input type="text" name="" id="" value="" />
<input type="image" value="提交操作"/>
</form>
<button type="submit">
<form action="aaaa.html" method="post">
<input type="text" name="" id="" value="" />
<button type="submit">提交操作</button>
</form>
5、select事件
select事件只能用于<input>元素与<textarea>元素,当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。