表单事件

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指定页面。

表单事件

原文：https://www.cnblogs.com/zhaozihan/p/7295324.html