关闭

jQuery中四个绑定事件的区别 on,bind,live,delegate

时间: 2019-01-17阅读: 893标签: jquery

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种方法 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1835

关闭

前端程序员应该知道的15个jQuery小技巧

15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...

JQuery的ajax函数执行失败,alert函数弹框一闪而过

原因其实非常简单,把form表单里最后提交按钮的type=submit换为type=button,因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现。事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完。

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

是时候和 jQuery 说拜拜了么?

在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!