菜单

前端基础-jQuery的事件的用法

2019年5月13日 - 皇家前端

3、移除事件

4、鼠标事件之focusin事件

当叁个要素,只怕其内部任何2个成分获得核心的时候,比方:input元素,用户在点击集中的时候,

假诺开荒者供给捕获这些动作的时候,jQuery提供了叁个focusin事件

应用上特别简单:

方法一:$ele.focusin()

绑定$ele成分,不带别的参数一般是用来内定触发二个事变,一般用的比较少

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

方法二:$ele.focusin( handler )

绑定$ele成分,每一趟$ele成分触发点击操作会推行回调 handler函数

如此这般能够本着事件的反映做过多操作了

<div id="test">点击触发<div>
$("#test").focusin(function() {
    //this指向 div元素
});

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

动用与措施二一样,可是能够承受2个数码参数,那样的拍卖是为着消除差异作用域下数据传递的标题

图片 1图片 2

<div id="test">点击触发<div>
$("#test").focusin(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});
 <h2>.focusin()方法</h2>
    <div class="left">
        <div class="aaron">
            点击聚焦:<input type="text" />
        </div>
    </div>
    <div class="right">
        <div class="aaron1">
            点击聚焦并传递参数:<input type="text" />
        </div>
    </div>
    <script type="text/javascript">

        //input聚焦
        //给input元素增加一个边框
        $("input:first").focusin(function() {
             $(this).css('border','2px solid red')
        })
    </script>
    <script type="text/javascript">
        //不同函数传递数据
        function fn(e) {
             $(this).val(e.data)
        }
        function a() {
            $("input:last").focusin('网', fn)
        }
        a();
    </script>

实例

一、卸载事件off()方法

传闻on绑定事件的片段特性,off方法也足以通过相应的传递组合的事件名,名字空间,选取器或管理函数来移除绑定在要素上点名的事件管理函数。

当有多少个过滤参数时,唯有与这一个参数完全相配的事件管理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删去3个事变

$("elem").off("mousedown")

删除全部事件

$("elem").off("mousedown mouseup")

神速方式删除全部事件,这里无需传递事件名了,节点上绑定的兼具事件讲全体销毁

图片 3图片 4

<h2>删除事件</h2>

    <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击删除mousedown事件</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })

    //删除事件
    $("button:first").click(function() {
        $(".aaron:first").off('mousedown')
    })

    </script>



    <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击销毁所有事件off</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:last").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })

    //删除事件
    $("button:last").click(function() {
        $(".aaron:last").off()
    })

    </script>

实例

2、键盘事件之keydown()与keyup()事件

鼠标有mousedown,mouseup之类的事件,那是依据人的手势动作分解的1个触发行为。相对应的键盘也可以有那类事件,将用户作为分解成三个动作,

键盘按下与松开,针对那样的二种动作,jQuery分别提供了对应keydown与keyup方法来监听

keydown事件:

当用户在多少个成分上率先次按下键盘上字母键的时候,就能够接触它。使用上非常轻巧,与中央事件参数管理保持1致,这里运用不在重复了,列出利用的法子

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

keyup事件:

当用户在一个要素上率先次松开键盘上的键的时候,就能够接触它。使用情势与keydown是同壹的只是触发的条件是艺术的

注意:

  1. keydown是在键盘按下就能够接触
  2. keyup是在键盘放手就能够接触
  3. 辩白上它能够绑定到其余因素,但keydown/keyup事件只是发送到具备关键的要素上,不相同的浏览器中,可获取核心的成分略有分裂,
  4. 但是表单成分总是能获取关节,所以对于此事件类型表单成分是最合适的。

图片 5图片 6

<h2>keydown()与keyup()事件</h2>
    <div class="left">
        <h4>测试一</h4>
        <div class="aaron">监听keydown输入:
            <input class="target1" type="text" value="" /><br />
            按下显示输入的值:<em></em>
        </div>
        <h4>测试二</h4>
        <div class="aaron">监听keyup输入:
            <input class="target2" type="text" value="" /><br />
            松手显示输入的值:<em></em>
        </div>
    </div>

    <script type="text/javascript">
    //监听键盘按键
    //获取输入的值
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)
    });

    //监听键盘按键
    //获取输入的值
    $('.target2').keyup(function(e) {
        $("em:last").text(e.target.value)
    });

    </script>

实例

二、事件绑定

一、鼠标事件之click事件

用交互操作中,最简便易行间接的操作正是点击操作。jQuery提供了七个方法二个是click方法用于监听用户单击操作,另贰个艺术是dbclick方法用于监听用户双击操作。

那三个措施的用法是相仿的,上边以click()事件为例

使用上特别轻易:

方法一:$ele.click()

绑定$ele成分,不带任何参数一般是用来钦定触发一个事件,用的相比较少

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

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

绑定$ele成分,每一遍$ele元素触发点击操作会施行回调 handler函数,那样能够针对事件的汇报做过多操作了,方法中的this是指向了绑定事件的要素

<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

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

行使与方式二同样,但是还不错3个数码参数,那样的管理是为了化解区别功效域下数据传递的题目

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

2、on()的高级用法

本着自身管理体制中,不仅仅有on方法,还有依照on衍变出来的live方法(一.7后去掉了),delegate方法等等。

那些艺术的平底完结部分
依然on方法,那是采用了on的另3个事变机制委托的建制演变而来的

信托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第一参数中提供了一个selector选用器,简单的来描述下

//参考下面3层结构

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>
//给出如下代码:

$("div").on("click","p",fn)

事件绑定在最上层div元素上,当用户触发在a成分上,事件将往上冒泡,一贯会冒泡在div成分上。借使提供了第三参数,

那正是说事件在往上冒泡的进程中相遇了选拔器相配的成分,将会触发事件回调函数

图片 7图片 8

<h2>on事件委托</h2>
    <div class="left">
        <a>钱多多</a>
        <div class="aaron">
            <a>111</a>
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制,点击a元素的时候,事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>

实例

四、鼠标事件之focusout事件

当3个因素,或许个中间任何一个要素失去焦点的时候,例如input元素,用户在点击失去焦的时候,假如开荒者须要捕获这一个动作,

jQuery提供了3个focusout事件

利用上特别简单:

方法一:$ele.focusout()

绑定$ele元素,不带任何参数一般是用来钦命触发3个风云,或然相似用的比较少

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

方法二:$ele.focusout( handler )

绑定$ele成分,每便$ele成分触发点击操作会试行回调 handler函数

如此能够本着事件的举报做过多操作了

<div id="test">点击触发<div>
$("#test").focusout(function() {
    //this指向 div元素
});

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

使用与艺术二等同,可是能够承受三个数目参数,那样的拍卖是为着减轻不一样功能域下数据传递的主题材料

图片 9图片 10

<div id="test">点击触发<div>
$("#test").focusout(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});
 <h2>.focusout()方法</h2>
    <div class="left">
        <div class="aaron">
            点击触发失去焦点:<input type="text" />
        </div>
    </div>
    <div class="right">
        <div class="aaron1">
            点击触发失去焦点并传递参数:<input type="text" />
        </div>
    </div>
    <script type="text/javascript">

        //input失去焦点
        //给input元素增加一个边框
        $("input:first").focusout(function() {
             $(this).css('border','2px solid red')
        })
    </script>
    <script type="text/javascript">

        //不同函数传递数据
        function fn(e) {
             $(this).val(e.data)
        }
        function a() {
            $("input:last").focusout('网', fn)
        }
        a();
    </script>

实例

7、表单事件之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) )

选拔与方法贰平等,但是尚可叁个数据参数,这样的管理是为了消除不一样成效域下数据传递的主题材料

图片 11图片 12

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

实例

三、鼠标事件之hover事件

jQuery直接提供了一个hover方法,能够方便管理。只须求在hover方法中传送三个回调函数就足以了,不要求展现的绑定贰个事件

$(selector).hover(handlerIn, handlerOut)

图片 13图片 14

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
      width: 100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      right: 0;
      height: 50px;
      width: 100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登录</li>
    <li>注册</li>
    <li>购物车
      <p class="son hide">
        空空如也...
      </p>
    </li>
  </ul>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".nav li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
</body>
</html>

实例

  1. 常用事件
  2. 事件绑定
  3. 移除事件
  4. 页面载入

5、表单事件之blur与focus事件

咱俩学过了表单处管事人件focusin事件与focusout事件,同样用于拍卖表单主旨的事件还有blur与focus事件

陆、表单事件之change事件

<input>成分,<textarea>和<select>成分的值都以能够发生改造的,开辟者能够经过change事件去监听这个退换的动作

input元素

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

select元素

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

textarea元素

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

change事件一点也不细略,无非正是注意下接触的顺序行为

图片 15图片 16

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

实例

翻阅目录

八、表单事件之submit事件

付出表单是3个最布满的职业要求,比如用户注册,一些新闻的输入都以索要表单的交付。一样的不经常开拓者必要在表单提交的时候过滤一些的数额、

做一些必备的操作(例如:验证表单输入的不错,要是不当就拦截提交,从新输入)此时得以经过submit事件,监听下交给表单的这些动作

应用上特别轻易,与主干事件参数管理保持一致

方法一:$ele.submit()

绑定$ele元素,不带其余参数一般是用来钦定触发3个事变,用的可比少

<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事件的一言一动:

上述那些操作下,都能够收缴submit事件。

此地需求非常注意:

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

图片 17图片 18

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>

实例

4、页面载入

当DOM载入就绪能够查询及调控时绑定贰个要试行的函数。那是事件模块中最关键的2个函数,因为它能够极大地进步web应用程序的响应速度。

二种写法:

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写:

$(function(){
// 你在这里写你的代码
})

文书档案加载完绑定事件,并且阻止暗许事件发生:

图片 19图片 20

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登录注册示例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">

  <label for="passwd">密码</label>
  <input type="password" id="passwd">

  <input type="submit" id="modal-submit" value="登录">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery对象存储到一个变量,避免重复查询文档树
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定义一个标志位,记录表单填写是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能为空");
          flag = false;
        }
      });
      // 表单填写有误就会返回false,阻止submit按钮默认的提交表单事件
      return flag;
    });
    // input输入框获取焦点后移除之前的错误提示信息
    $myForm.find("input[type!='submit']").on("focus", function () {
      $(this).next(".error").text("");
    })
  }
  // 文档树就绪后执行
  $(document).ready(function () {
    myValidation();
  });
</script>
</body>
</html>

实例

 

①、常用事件

壹、on()的多事件绑定

前边学的鼠标事件,表单事件与键盘事件都有个特色,正是直接给成分绑定3个管理函数,全部那类事件都以属于高效管理。

查看源码其实能够见见,全数的快捷事件在尾部的拍卖都以因而三个”on”方法来实现的。jQuery
on()方法是法定推荐的绑定事件的三个艺术。

基本用法:.on( events ,[ selector ] ,[ data ] )

最常见的给成分绑定叁个点击事件,相比较一下快速格局与on方式的例外

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的分歧点正是on是足以自定义事件名,当然不止只是怎么样,继续往下看

四个事件绑定同3个函数

 $("#elem").on("mouseover mouseout",function(){ });

透过空格分离,传递分裂的风浪名,能够同时绑定八个事件

多少个事件绑定分裂函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

由此空格分离,传递分化的轩然大波名,能够同时绑定两个事件,每1个风浪实施自个儿的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 天王盖地虎
}
$( "button" ).on( "click", {
  name: "天王盖地虎"
}, greet );

能够经过第壹参数(对象),当二个风云被触发时,要传送给事件管理函数的

图片 21图片 22

  <h2>on绑定多事件</h2>

    <h4>测试一</h4>
    <div class="left">
        点击触发:on('click',fn)
        <div id="test1"></div>
    </div>
    <script type="text/javascript">
    //事件绑定一
    $("#test1").on('click', function(e) {
        $(this).text('触发事件:' + e.type)
    })
    </script>


    <h4>测试二</h4>
    <div class="left">
        点击触发:on('mousedown mouseup')
        <div id="test2"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定一
    $("#test2").on('mousedown mouseup', function(e) {
        $(this).text('触发事件:' + e.type)
    })
    </script>


    <h4>测试三</h4>
    <div class="right">
        点击触发:on(mousedown:fn1,mouseup:fn2)
        <div id="test3"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定二
    $("#test3").on({
        mousedown: function(e) {
            $(this).text('触发事件:' + e.type)
        },
        mouseup: function(e) {
            $(this).text('触发事件:' + e.type)
        }
    })
    </script>

实例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图