首页 > 代码库 > jQuery事件绑定on()、bind()、live()与delegate() 方法详解

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

jQuery事件绑定有四个方法,对应为on,off,bind,unbind,delegate,undelegate,live,die

比较和联系:


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

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

 用来代替live()函数,live()函数在1.9版本已经删除;

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

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

具体如下:

.bind()

 $(‘a‘).bind(‘click‘, function() { alert("That tickles!") });

  这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上,但这里有两个问题:
第一个问题,这里用了隐式迭代的方法,如果匹配到的元素特别多的时候,比如如果我在div里放了50个p元素,就得执行绑定50次。对于大量元素来说,影响到了性能。但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
第二个问题,对于尚未存在的元素,无法绑定。点击页面上的按钮,将动态添加一个p元素,点击这个p元素,会发现没有动作响应。

.live()(不推荐)

  $(‘a‘).live(‘click‘, function() { alert("That tickles!") });

  JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

  live方法还可以被绑定到具体的元素(或context)而不是document上,像这样:

  $(‘a‘, $(‘#container‘)[0]).live(...);

 

为了解决这两个问题,可以用delegate方法。

.delegate()

  $(‘#container‘).delegate(‘a‘, ‘click‘, function() { alert("That tickles!") });

  JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

  可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$(‘a‘).live() == $(document).delegate(‘a‘),是这样吗?嗯,不,不完全是。

  为什么.delegate()要比.live()好用

  基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

  $(‘a‘).live(‘click‘, function() { blah() }); 
  // 或者 
  $(document).delegate(‘a‘, ‘click‘, function() { blah() });

  速度

  后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未知道被链接的方法将会是.live()。

  而另一方面,delegate方法仅需要查找并存储$(document)元素。

  一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

  灵活性和链能力

  live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。

  仅支持CSS选择器

  最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。 

.on()

 

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

使用方式 

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

例:

$(function () {
22 
23             /*********添加单个事件处理*********/
24 
25             $(".header").on("click", ".btn-test", function () {
26                 //显示隐藏div
27                 $(".container").slideToggle();
28             });
29 
30             /********添加多个事件处理********/
31 
32             //空格相隔方式
33             $(".header").on("mouseout click", ".btn-test", function () {
34                 //显示隐藏div
35                 $(".container").slideToggle();
36             });
37 
38             //大括号替代方式
39             $(".header").on({
40                 "mouseout": function () {
41                     alert("这是mouseout事件!");
42                 },
43                 "click": function () {
44                     $(".container").slideToggle();
45                 }
46             }, ".btn-test");
47 
48             //删除事件
49             $(".header").off("click", ".btn-test");
50 
51         });

总结:

1.选择器匹配到的元素比较多时,不要用bind()迭代绑定

2.用id选择器时,可以用bind()

3.需要给动态添加的元素绑定时,用delegate()或者on()

4.用delegate()和on()方法,dom树不要太深

5.尽量使用on()

 

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