jQuery事件委托

 

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，有了较多的动态添加进来的元素，直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到，在这里就需要用到事件委托方法，JQ为事件委托提供了live（）、dalegate（）和on（）方法。  

事件委托

我们知道，DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div > a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理。而利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

.live()

jQuery 1.3新增的live()方法，用法如下：

$("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象，而且只需要给$(document)绑定一次，然后就能够处理后续动态加载的单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。

到目前为止，一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：

• $()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
• 默认把事件绑定到$(document)元素，如果DOM嵌

  延伸阅读

  • ssh框架 2016-09-30
  • 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
  • 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
  • Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
  • 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
  • 从栈不平衡问题 理解 calling convention 2017-07-26
  • php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
  • Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
  • 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
  • 集合结合数据结构来看看(二) 2017-07-26

  学习是年轻人改变自己的最好方式