jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate

.click与.bind

.click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式。

这两种方式都会出现两个问题:

第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能。但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
第二个问题,对于尚未存在的元素,无法绑定。动态添加一个span元素,点击这个span元素,会发现没有动作响应。

那么你就会问,为什么要出现.bind()这个事件呢?

.bind()可以一次添加多个事件。

你给一个元素一次性添加了好多事件,.unbind()事件解绑,可以有选择性的解绑。

比如说,一个按钮,你点击后他要提交到后台等返回结果是,你不希望它能够再次被点击,但是它的其他效果还有,你就需要解绑。

.click和.bind 与.delegate

这个效果和普通绑定事件和on委托事件效果一样.(我之前写的http://www.cnblogs.com/wufangfang/p/5333007.html)

这种方式采用了事件委托的概念。不是直接为btn3元素绑定事件,而是为其父元素(或祖先元素也可)绑定事件,当在父元素内任意元素上点击时,事件会一层层从event target向上冒泡,直至到达你为其绑定事件的元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。

这样就解决了用。click(),bind()方法的上面两个问题,不用再一个个地去为btn元素绑定事件,也可以为动态添加进来的btn元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。

这样,绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。

.bind 与.delegate都可以同时绑定多个事件。

.delegat与.on

这两个函数实现的效果是一样的,以前没有开放on,只有bind,click,live,delagate,他们都是通过on实现的,后面把live删了,把on直接开放出来用。但是为什么不把.delegate也删掉,就不知道了,知道的可以告诉我。

.delegate和.on还是有一些细微的区别的:

参数的位置不太一样。

对于他们的解绑/解除委托

对于这里的handler是啥?

click和bind用unbind解绑,delegate和on的都是相应的解除委托,假如你要直接解绑一个元素的一个事件,那么你就用id选择器好了~,对一个单独元素这样解除委托不可以哦!

这样用类解除委托

总结:①选择器匹配到较多元素时,不用click和bind,用delegate和on,增加效率并且可动态添加元素。注意dom树不要太深,父元素选择得当。Jq版本要高

②选择器匹配的元素少时,可以用click和bind。 Jq低版本支持

综上所述呢,目前用on就对了。

时间: 2024-10-14 06:47:36

jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate的相关文章

jQuery中的.bind()、.live()和.delegate()之间区别分析

DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先

关于jquery中的bind()、live()、delegate()的区别分析浅析

近来在研究JS的时候,小码哥又一次看到jquery中常见的几种绑定事件的方法:bind(),live(),delegate().因此,闲来无事,想把他们几个做一下系统的分析,一遍后面的码农们能够一起分享! 先说好,鄙人也算是JS的初学者,很复杂的模块啥的,也是略懂而已,要是有码神看到,可别Ma我哈!! 那好,下面就直接进入主题了~ 首先,分别介绍一下这三个方法: 1.bind()--$(selector).bind(event,data,function);     event 为必需,规定添加

浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式

一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). live() 向当前或未来的匹配元素添加一个或多个事件处理器: bind() 向匹配元素添加一个或多个事件处理器.(不能用于当前不存在的元素) 使用方式(三种均相同) $(selector).on(event,childselector,data,function) event:必需项

JQuery的click、bind、delegate、off、unbind

.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能.但是如果是id选择器,因为id唯一,用bind()方法就很快捷了. 第二个问题,对于尚未存在的元素,无法绑定.动态添加一个span元素,点击这个span元素,会发现没有动作响应. 那么你就会问,为什么要出现.b

jQuery事件绑定on()、bind()、live()与delegate() 方法详解

jQuery事件绑定有四个方法,对应为on,off,bind,unbind,delegate,undelegate,live,die 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置:但是live(),on(),delegate()均支持未来新添加元素的事件设置: 2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以 用来代替live()函数,live()函

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

1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off. 2.必备的基础知识: DOM树 示例,这是在browser环境下的一棵模拟DOM树: 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们没有人为的设置stopPropagation(Moder Browser), cancel

jQuery事件:bind、delegate、on的区别

最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍然会触发lightbox的图片预览. 难道lightbox使用先进的MutationObserver技术监听了DOM的变化?观察lightbox源码才发现,原来只是jQuery的.on()方法: $('body').on('click', 'a[rel^=lightbox], ...', funct

详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bind(), .live(), .delegate() 和 .on() 的使用以及它们的不同. 如果你没有耐心或者只想看到总结的话,请直接跳转到结尾. 在我们深入了解这些方法之前,先准备好HTML代码. [javascript] view plain copy <pre> <ul id=&quo

jQuery事件绑定方法bind、 live、delegate和on的区别

我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1).DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: 2).Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素)