jQuery表单事件之blur与focus事件

在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件

它们之间的本质区别:

  1. 是否支持冒泡处理

举个简单的例子

  1. <div>
  2. <input type="text" />
  3. </div>

其中input元素可以触发focus()事件

div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。

  1. focus()在元素本身产生,focusin()在元素包含的元素中产生

blur与focusout也亦是如此

<h4>.focusin与blur</h4>
    <div class="left">
        <div class="aaron">
            点击触发焦点(无反应):
            <input type="text" />
        </div>
        <div class="aaron1">
            点击触发焦点并冒泡:
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron").focus(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron1").focusin(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })
    </script>

<h4>.focusout与blur</h4>
    <div class="right">
        <div class="aaron3">
            点击触发失去焦点(无反应):
            <input type="text" />
        </div>
        <div class="aaron4">
            点击触发失去焦点并冒泡:
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron3").blur(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron4").focusout(function() {
        $(this).find('input').val('冒泡捕获了focusout事件')
    })

</script>

jQuery表单事件之change事件

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

input元素

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

select元素

  1. 对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发

textarea元素

  1. 多行文本输入框,当有改变时,失去焦点后触发change事件

change事件很简单,无非就是注意下触发的先后行为

<h2>input、textarea与select</h2>
    <div class="left">
        <div class="aaron">input:
            <input class="target1" type="text" value="监听input的改变" />
        </div>
        <div class="aaron1">select:
            <select class="target2">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
        <div class="aaron3">textarea:
            <textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea>
        </div>
    </div>
    输出结果:
    <div id="result"></div>
    <script type="text/javascript">
    
    //监听input值的改变
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });

//监听select:
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })

//监听textarea:
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })
    </script>

jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

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

使用上非常简单:

方法一:.select()

触发元素的select事件:

  1. $("input").select();

方法二:$ele.select( handler(eventObject) )

绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <input id="test" value="文字选中"></input>
  2. $("#test").select(function() { //响应文字选中回调
  3. //this指向 input元素
  4. });

方法三:$ele.select( [eventData ], handler(eventObject) )

使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题

  1. <input id="test" value="文字选中"></input>
  2. $("#test").select(11111,function(e) {//响应文字选中回调
  3. //this指向 div元素
  4. //e.data  => 11111 传递数据
  5. });
  6.  
  7. <h2>input与textarea</h2>
        <div class="left">
            <h4>测试一</h4>
            <div class="aaron">
                选中文字:input
                <input type="text" value="慕课网" />
            </div>
            <button id="bt1">触发input元素的select事件</button>
            
            <h4>测试二</h4>
            <div class="aaron">
                textarea:
                <textarea rows="3" cols="20">用鼠标选中文字</textarea>
            </div>
        </div>
     
        <script type="text/javascript">
  8.  
  9.     //监听input元素中value的选中
        //触发元素的select事件
        $("input").select(function(e){
            alert(e.target.value)
        })
        $("#bt1").click(function(){
            $("input").select();
        })
  10.  
  11.     //监听textarea元素中value的选中
        $('textarea').select(function(e) {
            alert(e.target.value);
        });
  12.  
  13.     </script>

jQuery表单事件之submit事件

提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作

使用上非常简单,与基本事件参数处理保持一致

方法一:$ele.submit()

绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").submit(function(){
  3. alert('触发指定事件')
  4. })
  5. $("#text").click(function(){
  6. $("ele").submit() //指定触发事件
  7. });

方法二:$ele.submit( handler(eventObject) )

绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <form id="target" action="destination.html">
  2.   <input type="submit" value="Go" />
  3. </form>
  4. $("#target").submit(function() { //绑定提交表单触发
  5. //this指向 from元素
  6. });

方法三:$ele.submit( [eventData ], handler(eventObject) )

使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题

  1. <form id="target" action="destination.html">
  2.   <input type="submit" value="Go" />
  3. </form>
  4. $("#target").submit(11111,function(data) { //绑定提交表单触发
  5. //data => 1111 //传递的data数据
  6. });

通过在<form>元素上绑定submit事件,开发者可以监听到用户的提交表单的的行为

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

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

上述这些操作下,都可以截获submit事件。

这里需要特别注意:

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

jQuery处理如下:

  1. $("#target").submit(function(data) {
  2. return false; //阻止默认行为,提交表单
  3. });
  4.  
  5.   <h2>submit</h2>
        <div class="left">
            <div class="aaron">
                <form id="target1" action="test.html">
                    回车键或者点击提交表单:
                    <input type="text" value="输入新的值" />
                    <input type="submit" value="Go" />
                </form>
            </div>
            <div class="aaron">
                <form id="target2" action="destination.html">
                    回车键或者点击提交表单,禁止浏览器默认跳转:
                    <input type="text" value="输入新的值" />
                    <input type="submit" value="Go" />
                </form>
            </div>
        </div>
        <script type="text/javascript">
        //回车键或者点击提交表单
        $('#target1').submit(function(e) {
            alert('捕获提交表达动作,不阻止页面跳转')
        });
        //回车键或者点击提交表单,禁止浏览器默认跳转:
        $('#target2').submit(function() {
            alert('捕获提交表达动作,阻止页面跳转')
            return false;
        });
        </script>

jQuery-3.事件篇---表单事件的更多相关文章

  1. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  2. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  4. angular点击事件和表单事件

    <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <b ...

  5. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  6. jQuery学习- 表单事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Day050--jQuery表单事件 轮播图 插件库 ajax

    表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...

  8. sbadmin表单事件

    Form表单 自定义表单 <from action="" method="'><!---      这里可以用表单组件快速生成表单元素哦        ...

  9. $().each 和表单事件的坑

    在用each循环时 1.想结束循环 return false 2.想跳过某循环 return 3.想跳出function 不行,请切换成其他循环如 for 使用form表单事件 1.必须要有submi ...

随机推荐

  1. Python 互斥锁

    互斥锁Mutex的使用 多个线程处理共享数据,数据会出现问题: 2.7之前每100指令切换一次GIL锁,线程就会sleep,线程会把前100条处理指令存放在CPU缓存内,切换GIL锁后放入另外一个线程 ...

  2. Shell 脚本进阶2

    1.查询系统基础情况脚本 #!/bin/bash # 系统状态查询脚本 # 输出系统基本信息 # # 系统版本 SYSTEM_VERSION=`cat /etc/redhat-release` # 主 ...

  3. 自动化测试系列:如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  4. 第十届蓝桥杯2019年C/C++ 大学B组省赛试题

    2019年第十届蓝桥杯大赛软件类省赛C/C++大学B组 试题 A:组队 本题总分:5分 [问题描述] 作为篮球队教练,你需要从以下名单中选出 1号位至 5号位各一名球员, 组成球队的首发阵容. 每位球 ...

  5. Codeforces Round #495 (Div. 2) C. Sonya and Robots

    http://codeforces.com/contest/1004/problem/C 题意: 在一行上有n个数字,现在在最左边和最右边各放置一个机器人,左右机器人各有一个数字p和q.现在这两个机器 ...

  6. 记 Java 各版本新特性

    Java 8: Lambda 表达式: (paramList) -> expression; 或者 (paramList) -> {statments;} 演示用例: public int ...

  7. loadrunner中web_reg_save_param和web_reg_save_param_ex的区别

    在使用Loadrunner进行性能测试,编写接口请求脚本时,通过会用到关联函数,而web_reg_save_param和web_reg_save_param_ex的函数有什么区别呢?以下为总结的两点, ...

  8. Java实现将文件或者文件夹压缩成zip

            最近碰到个需要下载zip压缩包的需求,于是我在网上找了下别人写好的zip工具类.但找了好多篇博客,总是发现有bug.因此就自己来写了个工具类.         这个工具类的功能为: ( ...

  9. [Windows端口占用] 找到占用端口的进程并杀死

    命令行: netstat -aon|findstr "80" 会得到类似下列的数据 TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 2736 2736代表占用 ...

  10. ionic3开发ios端

    ionic框架是一端开发,三端适用(android端,ios端,web端),意思是在其中一端开发的代码,拿到另外两端,代码同样生效 那现在就说一下在web端开发拿到ios端开发前需要做的事情 开发io ...