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

Posted 2020-09-14

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