jQuery表单事件之blur与focus事件

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

它们之间的本质区别:

是否支持冒泡处理

举个简单的例子

<div>
<input type="text" />
</div>

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

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

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元素

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

select元素

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

textarea元素

多行文本输入框,当有改变时,失去焦点后触发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来防止触发浏览器的默认行为。

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

使用上非常简单:

方法一:.select()

触发元素的select事件:

$("input").select();

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

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

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

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

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

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

<input id="test" value="文字选中"></input>
$("#test").select(11111,function(e) {//响应文字选中回调
//this指向 div元素
//e.data  => 11111 传递数据
}); <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">     //监听input元素中value的选中
    //触发元素的select事件
    $("input").select(function(e){
        alert(e.target.value)
    })
    $("#bt1").click(function(){
        $("input").select();
    })     //监听textarea元素中value的选中
    $('textarea').select(function(e) {
        alert(e.target.value);
    });     </script>

jQuery表单事件之submit事件

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

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

方法一:$ele.submit()

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

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

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

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

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

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

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

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

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

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

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

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

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

这里需要特别注意:

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

jQuery处理如下:

$("#target").submit(function(data) {
return false; //阻止默认行为,提交表单
});   <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. (转) Ensemble Methods for Deep Learning Neural Networks to Reduce Variance and Improve Performance

    Ensemble Methods for Deep Learning Neural Networks to Reduce Variance and Improve Performance 2018-1 ...

  2. 不错的redis文章

    参考: https://www.cnblogs.com/itdragon/tag/redis/

  3. 浅了解:react为何需要设定唯一key值(antd-table)

    一.React规范 1.1 react key的作用 当渲染重复数据的时候,React.diff会根据生成的key进行虚拟DOM渲染, 所以我们需要在遍历的地方都要加上key,例如map.for等等 ...

  4. hdu 5564 Clarke and digits 矩阵快速幂优化数位dp

    Clarke and digits Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  5. canvas资料

    w3c比较全面的api http://www.w3school.com.cn/tags/html_ref_canvas.asp 一个总结比较全面的网站 http://blog.csdn.net/qq_ ...

  6. legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法)

    legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法) 一.总结 一句话总结:会执行的,所以写base控制器里面的方法要注意,base控制器里面的方法要以查数据为 ...

  7. Redis入门指南之一(简介)

    1. 简介 Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,通过提供多种键值数据类型来适应不同的场景下的缓存与存储需求.同时Redis的诸多高级功能使其可以胜任消息队列.任务队列等不同的 ...

  8. [IDE - Eclipse] JSP报错:The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path

    是因为Eclipse的Web项目不自动引入相关jar包. Right Click on the Project ❯ Properties ❯ Project Facets. You would be ...

  9. html5画心

     

  10. 菜鸟脱壳之脱壳的基础知识(四)——利用ESP定律来寻找OEP

    .上节说的是单步跟踪法,这节讲的是利用堆栈平衡(ESP定律)来进行脱壳!想必大家都听说过ESP定律这个大名吧!ESP定律运用的就是堆栈平衡原理!一般的加壳软件在执行时,首先要初始化,保存环境(保存各个 ...