1.jQ操作dom元素的绑定事件的四种方式

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

2.bind

$(selector).bind(event,data,function)
 event:事件，必选，一个或多个事件；data：参数，可选； fn：绑定事件发生时执行的函数，必选 
bind（）是最直接的，存在最久的绑定方法
优点：兼容性好，任何浏览器都可以使用
缺点：它会绑定事件到所有的目标元素上，有一个绑定一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素，点击它是没有反应的，必须再bind一次才执行，所以效率不太高。 
    
    

3.live

 $(selector).live(event,data,function)
这个方法用到了事件委托的概念来处理事件的绑定
优点：这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的 
元素挨个绑定，动态添加的元素仍然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上 

4.delegate

$(selector).delegate(childSelector,event,data,function)
childSelector:selector的子元素，必须写的
优点：可以选择把这个事件放在哪个元素上，需要迭代查找所有的selector/event data 来决定哪个子元素来匹配 
缺点：需要查找绑定的子元素，尽管比document少很多了，不过，你还是得浪费时间来查找。 

5.on

其实.bind(),.live(),.delegate()都是通过.on()来实现的，.unbind(),.die(),.undelegate()，也是一样的都是通过.off()来实现的。 
优点：提供了一种统一绑定事件的方法
缺点：也许会对你产生一些困扰，因为它隐藏了前面我们所介绍的三种方法的细节 

6.四种方式的异同和优缺点

相同点：

1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式；
 2.均是通过事件冒泡方式，将事件传递到document进行事件的响应

 比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live()，on（），delegate（）均支持对动态新添加元素的事件设置；
2.bind（）支持jQ所有版本；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（）差些 

7.结论

用.bind()，把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理：用空格分隔 $(selector).bind("click dbclick mouseout",data,function); 
 live（）已经被淘汰了
 .delegate()会提供很好的方法来提高效率，同时可以添加到动态创建的元素上
.on()是整合了之前的3中方式的新事件绑定机制，我们可以用.on()来代替上述的3种方法 

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1835