表单事件

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

posted @ 2020-07-05 21:24  六月的余晖  阅读(308)  评论(0编辑  收藏  举报