jQuery事件代理

DOM树

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:

事件冒泡(又称事件传播)

  当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行,什么意思,就是说开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档)

$(‘a‘).bind(‘click‘, function() { alert("That tickles!") });   

因此一个单击操作会触发alert函数的执行。

  click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

  在操纵DOM的语境中,document是根节点。
  现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

1.bind()函数

  

$(‘a‘).bind(‘click‘, function() { alert("That tickles!") });   

JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

2.live()函数

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

  JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
  live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

$(‘a‘, $(‘#container‘)[0]).live(‘click‘,function(){alert(‘I am live function‘);});

3.delegate()函数

$(‘#container‘).delegate(‘a‘, ‘click‘, function() { alert("That tickles!") });

  JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
  可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$(‘a‘).live() == $(document).delegate(‘a‘),是这样吗?嗯,不,不完全是。

  那么,为什么delegate的性能要好于live呢?

$(‘a‘).live(‘click‘, function() { f() });
// 或者
$(document).delegate(‘a‘, ‘click‘, function() { f() }); 

从以下三个方面分析:

  1)速度

  后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。
  而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

  2)灵活性和链能力

  live函数也挺令人费解的。想想看,它被链到$(‘a‘)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,以$.live(‘a‘,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。

  3)仅支持css选择器

  最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
那么为什么选择live()或者delegate()而不是bind()函数呢,毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
  1、为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
  2、如果你运行了$(‘a‘).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
  3、或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

$(‘a‘).bind(‘click‘, function(e) {
e.preventDefault();
// 或者
e.stopPropagation();
}); 

live()和delegate()很好的实现了事件代理,给性能上带来了优化。

时间: 2024-10-10 06:27:53

jQuery事件代理的相关文章

jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()

JavaScript事件代理入门

事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,"事件代理"即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 为什么要这样做呢? 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件. 下面将会用 Zepto 为大家演示怎么实现事件代理. 啊?Zepto是什么? Zepto is a minimalist J

jquery事件模型

大多数工具类都会提供标准入口和快捷方式,jquery事件模型也不例外 jquery1.0标准入口 属于jquery工具方法,通过$.event可查看 一个标准的事件大致就会经历这样的流程 如果对事件的传播进一步进行代理就还需要一个fix,重新制作代理以及取消默认行为 jquery1.0快捷入口 通过初始化方式,将标准工具方法,转换为实例方法而后 再一次产生更加快捷的方法,至此,通过jquery实例方法有2中调用方式 1.$().bind(type,fn) 2.$().onclick(fn) 在1

事件代理与事件处理流程

1.事件代理(事件委托)定义:当我们要对多个元素添加事件时,可以将事件添加给它们的父节点,而将事件委托给父节点来触发函数.<ul id="parent-list"> <li id="post-1"><a href="#">我是第1</a></li> <li id="post-2"><a href="#">我是第2</a

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

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

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

Atitit事件代理机制原理 基于css class的事件代理

1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规范1 1.3.1. jQuery和Dojo中delegate函数2 1.3.2. 优点2 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托 如果我们不想或不能够直接操纵目标对象,我们可以利用delegate创建一个代理对象来调用目标对象的方法,从而达到操纵目标对象的目的.代理对象要拥有目标对象的引用.这就是事件代理(也就是

JS中事件代理与委托

在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么特殊的用法呢?这篇文章就主要介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的

简述:js事件代理的7种方法

以为buttton元素绑定单击事件,来探讨事件绑定的几种方式: 1.最原始的方法:在button元素里面添加onclick事件,代码如下: <button onclick=function(){}></button> 这种方法虽然使用简单,但是有一个缺点就是:页面显示和事件处理混在一起,不符合网页开发设计的理念. 2.事件监听(addEventListener) 获取button元素,绑定事件监听 .addEventListener('click',fn,[true/false])