live(),bind(),delegate()等事件绑定方法的区别及应用解析

  1 首先bind()方法是最直观的,但是也是弊端最大的。

$(‘a‘).bind(‘click‘,function(){alert(‘that tickles!‘)}) 

这和事件冒泡有直接关系,当我们点击了<a></a>标签时,会立马执行alert,但与此同时,click()事件会接着向DOM树的根方向传播,广播到父元素,由父元素向上到每个祖先元素,只要是它的某个后代元素上的click()事件被触发,那么整个dom树都会牵一发而动全身。所以对未来元素的绑定不能用bind.

  2 live()方法的应用显然比bind()好了很多,用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.live( events [, data ], handler )
jQueryObject.live( eventsMap )

实例:

$(‘a‘).live(‘click‘,function(){alert(‘That tickles!‘)})

2.1 其中events为string类型,一个或多个用空格分隔的事件类型的可选的命名空间;data为可选的,任意类型,作用是传递给事件处理函数的任意数据;hander指定的事件处理函数;eventMap为一个object对象,每个属性对应事件类型和可选的命名空间(event),属性值对应绑定的事件处理函数。

2.2 live()的事件处理函数全部附加到document对象上,所以事件的处理时间可能会长一些,冒泡执行使会检查对象是不是对应的事件(本例中会检查是不是click事件),更重要的是会检查该事件的目标元素是否与“a”这一css选择器匹配(当前jQuery对象必须通过选择器字符串构造,否则无法处理触发事件)。

2.3 live()方法还可以被绑定到具体的元素上(not document)

eg:

$(‘a‘,$(‘#container‘)[0]).live(‘click‘,function(){alert(‘That tickles!‘)})//很useful的特点~

live()方法还有一个特点就是即使是后面创建的元素,用它绑定的事件会一直有效。

$("#jnBrangList").find(".imageMask").live("hover",function(){
        $(this).toggleClass("imageOver");
    });

如上例,因为“imageOver”元素是被页面加载完后动态创建的,所以如果用bind()的话是不会有效果的。

  3 delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。该方法适用于当前或未来的元素(比如由脚本创建的新元素)。

语法为:

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

这样我们可以把上面live()的实例改成:

$("#jnBrandList").delegate(".imageMask","hover",function(){
        $(this).toggleClass("imageOver");
    });
时间: 2024-08-11 09:10:05

live(),bind(),delegate()等事件绑定方法的区别及应用解析的相关文章

【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别

bind()                                                                                                                                                                                                        简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selecto

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

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

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

完美的jquery事件绑定方法on()

在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,用法如下: $("#info_table td").live("click",function(){/*显示更多信息*/}); 这里的.live()方法会把click事件绑定到$(document)对象,而且只需要给$(document)绑定一次,然后就能够处理后续动态加载的单元格的单击事件.在接收到任何事件时,$(document)

jQ新的事件绑定方法on()

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn)events:一个或多个用空格分隔的

JQUERY事件绑定方法研究

阅读前,我认为你需要先知道以下几点基础知识: dom对象是树形结构的 dom中的事件会从触发事件的目标节点开始逐级向上冒泡 每当我们想给某个元素绑定事件的时候,第一个想到的方法是bind,我们就先来说说bind. bind的作用是给具体的某个元素绑定事件,比如 1 $('button').bind('click',function(){}); 给所有的button元素添加了点击事件处理方法.这似乎已经可以完成大部分的事件绑定任务了,然而有一个问题它无法解决–如果某一元素是新添加的怎么办?bind

笔记-[6]-js中事件绑定方法的总结

js中的两种对象事件绑定方法: 1:常用的如:div.onclick=function(){...}; 2:通过系统方法绑定事件: 非IE:addEventListener('事件名[不加on]',function(){},false[或者true]) IE:attachEvent('事件名[加on]',function(){}); 通过系统方法绑定事件可以让对象可以绑定相同的事件并且执行不同的操作,如果使用第一种方法绑定多个相同的事件,最后一个事件会覆盖前面所有的事件. 在addEventLi

jQuery的4种事件绑定方法

jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品.该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库. 参数: event:必需

jQuery文本框(input textare)事件绑定方法教程

jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法