zoukankan      html  css  js  c++  java
  • 表单事件

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

  • 相关阅读:
    最近的一些想法Booch和高斯
    校内网自动分享视频flash xss蠕虫分析
    使用Axis2开发Web Service简单演示实例
    最近的一些想法UML和算法
    JavaScript2.0 :抢先尝鲜
    有一种感觉,百度应该开发浏览器
    mongodb修改器
    mongdb时间类型
    mongodb文档替换
    mongodb 分片集群+副本集搭建
  • 原文地址:https://www.cnblogs.com/zhaozihan/p/7295324.html
Copyright © 2011-2022 走看看