jQuery中的bind(),live(),delegate()

大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网js任务3，深度思考中的知识点——jQuery中的bind(),live(),delegate(),on()有什么区别？

一.背景介绍

在学习和实践jquery框架的过程中，由于开始，只是使用的《锋利的Jquery》中绑定事件的方法，只认识到了bind()的方法。而该书是基于jquery1.7.1编写的，目前最新的版本已经到了3.2。对于绑定事件的方法做了调整。后来发现还有live()、delegate()、on()的方法，它们之间有什么样的区别呢？我们来学习讨论一下。

二.知识剖析

2.1 bind()方法

bind()方法用于对匹配的元素进行特定事件的绑定。它直接绑定在现有的元素节点上，也很好的解决了浏览器在事件处理中的兼容问题。例如，它的调用格式如下：

bind(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数$('a').bind('click',function(){alert('that tickles!')})

JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

2.2 live()方法

live()是事件委托的概念来执行，把节点的处理委托给了document，向当前或未来的匹配元素添加一个或多个事件处理器。

live(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数

$('a').live('click',function(){alert('That tickles!')})

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

2.3 delegate()方法

delegate()方法的行为有点类似live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。它适用于当前或未来的元素（比如由脚本创建的新元素）。

delegate(selector,[type],[data],fn)//元素节点(字符串形式，一般是子级元素childselector)，事件类型，传递的参数(可选)，相关的函数$('#container').delegate('a','click',function(){ alert("That tickles!") });

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

2.4 on()方法

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的，提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。

on(events,[selector],[data],fn) // 事件类型，元素节点(可选)，传递的参数(可选)，相关的函数

三.常见问题

问题: bind(),live(),delegate(),on()的特点及区别？

四.解决方案

bind()的特点：直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。

live()的特点：与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。

delegate()方法的特点：更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。

on()的特点：是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。

五.编码实战

六.拓展思考

如何删除一个事件

$(document).ready(function(){

$("body").on("click","p",changeSize);

$("body").on("click","p",changeSpacing);

$("button").click(function(){

$("body").off("click","p");

});

});

七.参考文献

jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别

jQuery中.bind() .live() .delegate() .on()区别

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

八.更多讨论

以上介绍到的jQuery事件方法的知识点中大家在使用过程中有没有遇到其他的问题？

PPT

jQ中的bind,live,delegate,on有什么区别_腾讯视频