Jquery 的bind(), live(), delegate(), on()绑定事件方式

Posted 2020-07-08 facial

1. 因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅。

 

bind()

　　适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。

 

live()

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

 

delegate()

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

 

　　jquery1.4.2及其以上版本；

 

on()

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

　　关于页面加载时页面上没有的元素，可能因为后来javascript添加的元素，所以就算绑定了事件也不会有反应，这里就要把事件绑定到document上，利用冒泡触发事件。

　　$(document).on(‘click‘, ‘#clickdiv‘, function() {

　　　　alert("clicked!");

　　});

 

 

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+；　

 

总结：

 

如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替