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

  • 相关阅读:
    《Linux shell变量总结回顾》RHEL6(转)
    20个最受欢迎的Linux命令(转)
    如果看了这篇文章你还不懂傅里叶变换,那就过来掐死我吧(转)
    妻共贫贱难,夫共富贵难
    [置顶] 阅读Oracle官方文档指南
    Java实现 蓝桥杯 算法训练 递归求二项式系数
    Java实现 蓝桥杯 算法训练 数字三角形
    Java实现 蓝桥杯 算法训练 数字三角形
    Java实现 蓝桥杯 算法训练 数字三角形
    Java实现 蓝桥杯 算法训练 数字三角形
  • 原文地址:https://www.cnblogs.com/zhaozihan/p/7295324.html
Copyright © 2011-2022 走看看