事件委托和JQ事件绑定总结

事件委托：

比喻：事件委托的事例在现实当中比比皆是。好比，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三我的在公司门口等快递；二是委托给前台MM代为签收。现实当中，咱们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，而后按照收件人的要求签收，甚至代为付款。这种方案还有一个优点，那就是即便公司里来了新员工（无论多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

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

.bind()

假设有一个多行多列的表格，咱们想让用户单击每一个单元格都能看到与其中内容相关的更多信息（好比，经过提示条）。为此，能够为每一个单元格都绑定click事件：

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

问题是，若是表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会致使脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存（相似于让每一个人亲自站在门口等快递）。

在前面这个例子的基础上，若是咱们想实现一个简单的相册应用，每页只显示50张照片的缩略图（50个单元格），用户点击“第x页”（或“下一页”）连接能够经过Ajax从服务器动态加载另外50张照片。在这种状况下，彷佛使用.bind()方法为50个单元格绑定事件又能够接受了。

事实却否则。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给将来新增的元素绑定事件（相似于新来的员工收不到快递）。

live()----------die()详细解说地址
事件委托能够解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法便可：

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

到目前为止，一切彷佛很完美。惋惜，事实并不是如此。由于.live()方法并不完美，它有以下几个主要缺点：

1. $()函数会找到当前页面中的全部td元素并建立jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，于是生成这个jQuery对象会形成没必要要的开销；
2. 默认把事件绑定到$(document)元素，若是DOM嵌套结构很深，事件冒泡经过大量祖先元素会致使性能损失；
3. 只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$(“#infotable td”).live…能够，但$(“#infotable”).find(“td”).live…不行；
4. 收集td元素并建立jQuery对象，但实际操做的倒是$(document)对象，使人费解。

解决之道
为了不生成没必要要的jQuery对象，可使用一种叫作“早委托”的hack，即在$(document).ready()方法外部调用.live()：

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

在此，(function($){…})(jQuery)是一个“当即执行的匿名函数”，构成了一个闭包，能够防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中连接和(或)执行的。之因此选择这个时机，由于这时候恰好document元素可用，而整个DOM还远未生成；若是把脚本放在结束的body标签前面，就没有意义了，由于那时候DOM已经彻底可用了。

为了不事件冒泡形成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

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

 

delegate()    仔细讲解连接

如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

使用.delegate()，前面的例子能够这样写：

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

使用.delegate()有以下优势（或者说解决了.live()方法的以下问题）：

• 直接将目标元素选择符（”td”）、事件（”click”）及处理程序与“受拖方”$(“#info_table”)绑定，不额外收集元素、事件传播路径缩短、语义明确；
• 支持在连缀的DOM遍历方法后面调用，即支持$(“table”).find(“#info”).delegate…，支持精确控制；

可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的状况下，也可使用.live()。

提示：使用事件委托时，若是注册到目标元素上的其余事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

 

one()详细讲解地址

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每一个元素只能运行一次事件处理器函数。

toggle()

toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

trigger()

方法触发被选元素的指定事件类型。

与 trigger() 方法相比的不一样之处

• 它不会引发事件（好比表单提交）的默认行为
• .trigger() 会操做 jQuery 对象匹配的全部元素，而 .triggerHandler() 只影响第一个匹配元素。
• 由 .triggerHandler() 建立的事件不会在 DOM 树中冒泡；若是目标元素不直接处理它们，则不会发生任何事情。
• 该方法的返回的是事件处理函数的返回值，而不是具备可链性的 jQuery 对象。此外，若是没有处理程序被触发，则这个方法返回 undefined。

 

另：事件源

IE下 event.srcElement

FF下 event.Target

 

原文

另外一篇连接