HTML5 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

最新推荐文章于 2021-06-04 07:36:44 发布

Hank铄

最新推荐文章于 2021-06-04 07:36:44 发布

阅读量2.1k

点赞数 1

文章标签： HTML5 浅谈Jquery中的bind live delegate on绑定事件方式

本文链接：https://blog.csdn.net/sky1466181491/article/details/51706148

版权

本文介绍了jQuery中bind、live、delegate和on四种事件绑定方式的差异，包括它们的使用场景、特点和适用版本。bind()在jQuery1.7后被on()取代，live()在1.9版本后不再支持，delegate()适用于jQuery1.4.2及以上版本，而on()从1.7版本开始引入，适用于当前和未来元素的事件绑定。在低版本jQuery中推荐使用delegate()，高版本则使用on()。

摘要由CSDN通过智能技术生成

前言

　　因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到园友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。

bind()

简要描述

　　bind()向匹配元素添加一个或多个事件处理器。

使用方式

　　$(selector).bind(event,data,function)

　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);

　　　　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　

　　　　　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

 
    
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>jquery中bind()绑定事件方式</title>
   <style type="text/css">
       .container
       {
    
           width: 300px;
           height: 300px;
           border: 1px #ccc solid;
           background-color: Green;
       }
       .btn-test
       {
    
           border: 1px #ccc solid;
           padding: 5px 15px;
           cursor: pointer;
       }
   </style>
   <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {

           /*********添加单个事件处理*********/

           $(".btn-test").bind("click", function () {
               //显示隐藏div
               $(".container").slideToggle();
           });

           /********添加多个事件处理********/

           //空格相隔方式
           $(".btn-test").bind("mouseout click", function () {
               //显示隐藏div
               $(".container").slideToggle();
           });

           //大括号替代方式
           $(".btn-test").bind({
               "mouseout": function () {
                   alert("这是mouseout事件!");
               },
               "click": function () {
                   $(".container").slideToggle();
               }
           });

           /********删除事件处理********/
           $(".btn-test").unbind("click");

       });
   </script>
</head>
<body>
   <input type="button" value="按钮" class="btn-test" />
   <div class="container">
   </div>
</body>
</html> 
    
  

适用Jquery版本

　　适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。

live()

简要描述

　　live() 向当前或未来的匹配元素添加一个或多个事件处理器；

使用方式

　　$(selector).live(event,data,function)

最低0.47元/天解锁文章

Hank铄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

前言　　因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到园友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。bind()简要描述　　bind()向匹配元素添加一个或多个事件处理器。使用方式
复制链接

扫一扫