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

适用所有版本,但是自从jquery1.7版本以后bind()函数推荐用on()来代替。

$(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:必需;当绑定事件发生时,需要执行的函数;

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

jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

$(selector).live(event,data,function)
  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
      单事件处理:例如 $(selector).live("click",data,function);
      多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);
            2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...}) 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     
  data:可选;需要传递的参数;
  function:必需;当绑定事件发生时,需要执行的函数;

3、delegate():为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

适用jquery1.4.2及其以上版本;

$(selector).delegate(childSelector,event,data,function)
  childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
      单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
      多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
            2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...}) 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     
  data:可选;需要传递的参数;
  function:必需;当绑定事件发生时,需要执行的函数;

4、on():为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用on()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

$(selector).on(event,childselector,data,function)
  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
      单事件处理:例如 $(selector).on("click",childselector,data,function);
      多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
            2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector); 
            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 
  childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;    
  data:可选;需要传递的参数;
  function:必需;当绑定事件发生时,需要执行的函数;

四种方式的异同和优缺点

相同点:1、都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

2、均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:

1、bind()只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

2、bind()在jquery1.7版本以前比较受推崇,1.7版本出来以后,官方已经不推荐用bind(),替代函数为on()。live()函数在1.9版本已经删除。

3、live()函数和delegate()函数两者类似,但live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些。

4、bind()支持jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

代码:

.container { width: 300px; height: 300px; border: 1px solid #ccc; background-color: green; }
.btn_test { border: 1px solid #ccc; padding: 5px 15px; cursor: pointer; }

<div class="fz"><div class="header"><input type="button" value="按钮" class="btn_test"></div><div class="container"></div>
</div>

<script>$(function () {
//        bind();
//        添加单个事件处理
//        $(".btn_test").bind("click",function(){//            $(".container").slideToggle();
//        });
//        添加多个事件处理
//        空格相隔方式
//        $(".btn_test").bind("mouseout click",function(){//            $(".container").slideToggle();
//        });
//        大括号替代方式
//        $(".btn_test").bind({//            "click":function(){//                $(".container").slideToggle();
//            },
//            "mouseout":function(){//                alert("这是mouseout事件");
//            }
//        });
//        删除绑定事件
//        $(".btn_test").unbind("click");//          live();支持1.9以下版本
//        添加单个事件处理
//        $(".btn_test").live("click",function(){//            $(".container").slideToggle();
//        });
//        添加多个事件处理
//        空格相隔方式
//        $(".btn_test").live("mouseout click",function(){//            $(".container").slideToggle();
//        });
//        大括号替代方式
//        $(".btn_test").live({//            "mouseout":function(){//                alert("这是mouseout事件");
//            },
//            "click":function(){//                $(".container").slideToggle();
//            }
//        });
//        删除事件处理
//        $(".btn_test").die("click");//        delegate();
//        单元素添加事件
//        $(".header").delegate(".btn_test","click",function(){//            $(".container").slideToggle();
//        });
//        单元素添加多事件
//        空格相隔方式
//        $(".header").delegate(".btn_test","click mouseout",function(){//            $(".container").slideToggle();
//        });
//        大括号替代方法
//          $(".header").delegate(".btn_test",{//              "mouseout":function(){//                  alert("这是mouseout事件");
//              },
//              "click":function(){//                  $(".container").slideToggle();
//              }
//          });
//          on();
//        添加单个事件处理
//        $(".header").on("click",".btn_test",function(){//            $(".container").slideToggle();
//        });
//        添加多个事件处理
//        空格相隔方式
//        $(".header").on("mouseout click",".btn_test",function(){//            $(".container").slideToggle();
//        });
//        大括号替代方式$(".header").on({"mouseout":function(){alert("这是mouseout事件");},"click":function(){$(".container").slideToggle();}},".btn_test");
//        删除事件$(".header").off("click",".btn_test");})
</script>

转载于:https://www.cnblogs.com/zhaojieln/p/4256436.html

bind(),live(),delegate(),on()绑定事件方式相关推荐

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

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  2. 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式

    一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...

  3. 【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别

    bind()                                                                                               ...

  4. jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...

  5. [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?

    [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...

  6. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是'事件委托(event delegation)'了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  7. click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: <s ...

  8. jquery之bind(),live(),delegate()

    大纲: 1.bind(),live(),delegate()的含义 2.三者基于相同的原理即js的事件冒泡 3.三者相互之间的异同. bind()+live() V.S. delegate():bin ...

  9. JQuery的click、bind、delegate、off、unbind

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

最新文章

  1. java_2018_Day7_静态static
  2. Codeforces 1188 题解
  3. B端运营级视频服务技术平台搭建
  4. Oracle入门(十四.23)之管理触发器
  5. 测试驱动开发 测试前移_为什么测试驱动的开发有用?
  6. google浏览器 隐藏功能开启
  7. BZOJ_1606_ [Usaco2008_Dec]_Hay_For_Sale _购买干草_(背包)
  8. 新闻简报(7/18)
  9. tomcat设置子域名session共享以及修改JSESSIONID
  10. sklearn——加载数据集
  11. 基于OpenCascade 与COIN3D的机械臂仿真测试
  12. 双子星tv源码_双子星IPTV电视直播管理系统源码安装教程
  13. python截图搜题_用python的OCR实现自动截图搜题
  14. 微信小程序——如何实现账号的注册、登录?
  15. 从外包公司到今日头条offer,帮你突破瓶颈
  16. 轻便易用的三维建模软件
  17. 为什么你的网速一直快不起来?
  18. MTL多目标学习介绍综述等
  19. 第二章第四题(将磅转换为千克)(convert pound to kilogram)
  20. 对AutoResetEvent和ManualResetEvent的理解

热门文章

  1. kafka session.timeout.ms 是指消费一条数据的时间?_干货 | Kafka 内核知识梳理,附思维导图...
  2. java 反射覆盖方法,java – 确定一个方法是否覆盖使用反射的另一个?
  3. mysql 5.1.6 安装包_Centos6 离线安装 MySQL5.5.55-1(附带安装包及 Perl 依赖包)
  4. java主线程和子线程区别_主线程异常– Java
  5. c语言中isdigit函数_在C / C ++中使用isdigit()
  6. Total Commander 常用快捷键
  7. 智能虚拟代理改善了哪些行业?
  8. 开课吧课堂:人工智能行业走向如何?
  9. 开课吧Java课堂:什么是主线程?如何去运用?
  10. canvas学习笔记-贝塞尔曲线