jQuery绑定事件的四种方式：bind、live、delegate、on

本是古典何须时尚 2023-06-14 12:00 6阅读 0赞

### **jQuery绑定事件的四种方式：bind、live、delegate、on****   ** ###

**1、jQuery操作DOM元素的绑定事件的四种方式**

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

**2、必备的基础知识: DOM树**

我们的页面可以理解为一棵DOM树，当我们在叶子结点上做什么事情的时候（如click一个a元素），如果我们没有人为的设置stopPropagation(Moder Browser),

cancelBubble(IE),** //阻止传播（现代的浏览器），取消冒泡（ie浏览器），**那么它的所有父元素，祖宗元素都会受之影响，绑定的事件也对它们产生作用。

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

**当我们点击a，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件：**

**3、bind**

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

event：事件，必选，一个或多个事件；　　data：参数，可选；　　fn：绑定事件发生时执行的函数，必选。

**　　**bind()是最直接的、存在最久的绑定方法。

优点：这个方法提供了一种在不同浏览器中对事件处理的兼容性解决方案。

缺点：它会绑定事件到所有的目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。

但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。也就是说，它不会绑定到在它执行完后动态添加的那些元素上。

当元素很多时，会出现效率问题。当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

**4、live**

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

**　　**这个方法用到了**事件委托**的概念来处理事件的绑定。

优点：这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定。

那些动态添加的元素依然可以触发那些早先绑定的事件，因为事件**真正的绑定是在document上**。

你可以在document ready之前就可以绑定那些需要的事件。

遇到过的问题：多次加载某代码块会重复绑定，导致js执行多次

解决方案：每次绑定live事件前先解除监听,可以用到live的解除监听事件die()

实例：$(*selector*).die().live(*event*,*data*,*function*)

**5、delegate**

**　　**$(selector).delegate(childSelector,event,data,function)

childSelector：selector的子元素，必需项。

delegate()有点像live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是**由你决定把它放在哪儿。**

**　　**优点：你可以选择你把这个事件放到那个元素上了。

需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

可以用在动态添加的元素上。

缺点：需要查找绑定的子元素，尽管比document少很多了，不过，你还是得浪费时间**来查找。**

**6、on**

其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，

优点：提供了一种统一绑定事件的方法。

缺点：也许会对你产生一些困扰，因为它隐藏了前面我们所介绍的三种方法的细节。

**7、四种方式的异同和优缺点**

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

2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；

**　　比较和联系:**

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

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

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

同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

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

**8、结论**

用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上。**【bind：直接绑定到元素上，有一个绑一个。】**

不要再用.live()了，它已经不再被推荐了。

.delegate()会提供很好的方法来提高效率，同时我们可以添加到动态创建的元素上。

**　　　　  **.on()是整合了之前的3种方式的新事件绑定机制，**我们可以用.on()来代替上述的3种方法。**

** 9、绑定多事件的处理**

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

多事件处理：

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

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

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

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

[event1_function]: http://event1function/
[event2_function]: http://event2function/

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS绑定事件三种方式

三种方式 1、在DOM中直接绑定 2、在JS代码中直接绑定 3、使用事件监听函数绑定事件一、在DOM中直接绑定也就是直接在html标签中通过 onXX

╰半橙微兮°/ 2023年07月22日 04:58/ 0 赞/ 32 阅读

相关 jQuery绑定事件的四种方式：bind、live、delegate、on

jQuery绑定事件的四种方式：bind、live、delegate、on 1、jQuery操作DOM元素的绑定事件的四种方式 jQuery中提

本是古典何须时尚/ 2023年06月14日 12:00/ 0 赞/ 7 阅读

相关 JQuery事件绑定方式

JQuery事件绑定方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁践踏了优雅/ 2022年12月18日 05:59/ 0 赞/ 276 阅读

相关 jquery 绑定事件方式(可能出错处)

jquery 绑定事件的方式？ \- 其实大体可以分为能不能绑定动态加载出来的节点事件来分类 1.直接在标签上绑定 <button onclick='

傷城~/ 2022年10月01日 00:44/ 0 赞/ 187 阅读

相关 jquery绑定事件

bind()向匹配元素添加一个或多个事件处理器。 $(selector).bind(event,data,function) live() 向当前或未来的匹配元素添加一个

左手的ㄟ右手/ 2022年06月17日 01:27/ 0 赞/ 379 阅读

相关 jQuery绑定事件的四种方式

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuer

以你之姓@/ 2022年06月16日 04:52/ 0 赞/ 251 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 255 阅读

相关 JQuery中事件绑定的四种方法及其优缺点

JQuery中事件绑定的方法有`bind`、`live`、`delegate`、`on` 1、`bind`：`bind(type [,data], fn)` `.bind`

r囧r小猫/ 2022年05月24日 06:44/ 0 赞/ 298 阅读

相关 JQuery_绑定事件

绑定：绑定事件：一.如何给元素同时绑定两个事件？方法一：链式编程 $('button').click(function(){ a

ゞ浴缸里的玫瑰/ 2022年05月20日 23:42/ 0 赞/ 404 阅读

相关 jQuery事件绑定与解绑的方式

jQuery绑定事件的方式很简单，有两种。其优异点都在下面的注释中做好了，请看下面的代码吧。 <!DOCTYPE html> <html lang="en">

逃离我推掉我的手/ 2022年03月12日 10:56/ 0 赞/ 315 阅读