JQUERY事件绑定方法研究

阅读前,我认为你需要先知道以下几点基础知识:

  • dom对象是树形结构的
  • dom中的事件会从触发事件的目标节点开始逐级向上冒泡

每当我们想给某个元素绑定事件的时候,第一个想到的方法是bind,我们就先来说说bind。

bind的作用是给具体的某个元素绑定事件,比如


1


$(‘button‘).bind(‘click‘,function(){});

给所有的button元素添加了点击事件处理方法。这似乎已经可以完成大部分的事件绑定任务了,然而有一个问题它无法解决–如果某一元素是新添加的怎么办?bind将事件处理函数绑定在了具体的元素上,而新添加的元素身上是没有被绑定处理函数的。也就是说,如果执行完上面的代码后再动态添加一个button元素,新添加的这个button元素是没有被绑定事件处理函数的。

于是,live出现了。对于刚开始接触jquery的人来说,live是一个很神奇的事件绑定方法,无论某一元素已经存在还是将来会被添加到页面中,live都能将事件绑定到它身上。

真的很神奇吗?其实它的原理很简单,那就是“事件委派”。

什么是事件委派?举个简单的例子。

假如有一个表格,我们要动态增删里面的行元素,同时想给每一个行元素绑定一个点击事件。给具体的tr元素绑定事件是不现实的,因为它们总是不断变化的。于是我们可以换个思路,为什么一定要给tr元素绑定事件呢?

我们可以把事件绑定到table元素上,发生在table的子元素身上的点击事件都会冒泡到table元素上,在这里可以做一个比较,如果点击事件的目标是tr元素,执行绑定的函数就好了。这就是事件委派,委派某个元素处理子元素触发的事件。


1


$(‘table tr‘).live(‘click‘,function(){});

这样,就可以给tr元素绑定点击事件,无论它是已经存在的,还是将来被添加的。

那么,执行完上面的代码,事件确实被绑定在table元素上了吗?不!

现实中,我们要动态添加的元素指不定在dom树的哪一层。为了让所有新添加的元素都能触发预先绑定的事件处理函数,jquery将事件处理函数委派在了dom树的根元素,也就是document元素,身上。这样一来,无论新添加的元素位于dom树的哪个层级,它触发的事件总会冒泡到根元素上。在这里,可以做一个判断,如果事件触发目标是想要绑定事件处理函数的那个元素,执行该函数就好了。

这看起来很美好,似乎我们完全可以放弃bind,在任何情况下都可以使用live了。不过,等等,如果真是这样的话,后边的delegate就没有用武之地了。

live方法的好处不言而喻,然而它也有弊端。假设我们还是要给tr元素绑定点击事件。如果页面中有一千个元素,只有10个是tr元素,会是什么情况?那990个不相干的元素触发的事件也会冒泡到根元素上,在那里做一次比较,无形当中就会带来性能的消耗。这可真是宁可错杀一千,也不放过一个啊。

显然,live并没有看上去的那么美好,于是delegate闪亮全场了。

我们要给tr元素绑定事件,离它最近的父元素就是table了。既然如此,我们为什么还要不辞辛苦地把事件绑定在document元素上,而不是绑在table身上呢?delegate就是干这个活的。


1


$(‘table‘).delegate(‘tr‘,‘click‘,function(){});

上面的代码将点击事件委派在table元素上,其下的tr元素身上的点击事件会触发处理函数。

到目前为此,我们认识了三个和事件绑定有关的方法。他们的使用方法和使用时机你都记住了吗?好吧,我是费了点功夫才记住并区分它们的。

绑定事件居然有三个方法,太可怕了,要是只有一个就好了。其实,jquery的作者也是这么想的。从1.7版本开始,jquery添加了一个新的事件绑定方法–on–来代替之前提到的所有方法。这真是一个令人欣喜的消息。

on的使用方法很简单,如果你没有指定后代元素,那么就是简单的事件绑定,类似于bind。比如


1


$(‘tr‘).on(‘click‘,function(){});

会把点击事件绑定在tr身上,如果执行完代码后新添加了一个tr元素,那它身上自然是没有事件处理函数的。

那怎么做事件委派呢?是这个样子的


1


$(‘table‘).on(‘click‘,‘tr‘,function(){});

事件委派到了table元素身上,它的tr子元素身上的点击事件会触发事件处理函数。

好了,从今天起,忘掉bind、live和delegate吧,on才是你居家旅行,必备的神器!据说,只是据说,在新版本中,就算你调用bind、live或delegate,它内部都会调用on。既然如此,我们为什么不自己使用on呢?

时间: 2024-10-10 17:07:23

JQUERY事件绑定方法研究的相关文章

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

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

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

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

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中的事件绑定方法

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

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

深入学习jQuery事件绑定

× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对这四种事件处理程序进行了兼容处理,以更简单的方式就可以实现事件绑定.本文将详细介绍jQuery事件绑定 bind() bind()方法为一个元素绑定事件处理程序,有以下3种使用方法 bind(eventType[,eventData],handler(eventObject)) bind()方法可以

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

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

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

jquery 事件绑定案例

效果图公如下 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv