jquery 事件--表单事件

一、focus() 与 blur()

与focusin() , focusout() 的区别：是否支持冒泡处理

focusin(): 事件绑定在父元素div，当它内部 有input获得焦点，会冒泡给父元素div。focusout() 也是

<div class="box">
  　点击触发焦点(无反应)：
　　<input type="text" />
</div>
 $(".box").focusin(function() {
     $(this).css('border', '2px solid red');// 点击input，input获得焦点，冒泡到父元素div ，父元素div加上了边框，$(this)代表父元素.box而不是点击的input元素
 })

但一般直接 绑定到input上 如： $("input").focus(),$('input').focusin()

二、 change() 事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素：监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素：对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发（点击原已选中项，不会触发）

textarea元素：多行文本输入框，当有改变时，失去焦点后触发change事件

<input type="text" />
<p></p>
//监听input值的改变
    $('input').change(function(e) {
        $("p").html(e.target.value)
    });

三、select() 事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select事件只能用于<input>元素与<textarea>元素

<input type="text" value="web前端" />
<button id="btn">点击调用选中</button>
$("input").select(function(e){
        alert(e.target.value)
         
         return false;     //阻止默认行为 
         e.preventDefault(); //阻止默认行为      
})
$("#btn").click(function(e){
        $("input").select(); //点击按钮调用，在chrome浏览器下，会弹出3次，因此要阻止浏览器默认行为
 })
        

四、submit() 事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。

同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作

（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作

具体能触发submit事件的行为：

• <input type="submit">
• <input type="image">
• <button type="submit">
• 当某些表单元素获取焦点时，敲击Enter（回车键）

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) { 
   return false; //阻止默认行为，提交表单
});

<form id="target1" action="test.html">
    回车键或者点击提交表单： 
    <input type="text" value="输入新的值" />
    <input type="submit" value="Go" />
</form>

$('#target1').submit(function(e) {
        alert('捕获提交表达动作,不阻止页面跳转')
    });