什么事件委托？
　　DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body & div & a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理。而利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。
事件委托的使用情景：
　　为DOM中的很多元素绑定相同事件；　　为DOM中尚不存在的元素绑定事件；
　　随着DOM结构的复杂化和Ajax等动态脚本技术的运用，较多的元素会动态的添加到页面上，直接用jquery添加click事件会发现新添加进来的元素并不能直接选取到，在这里就需要用到事件委托方法。jquery为事件委托提供了live（）、dalegate（）和on（）方法。
　　假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息了，可以为每个单元格都绑定click事件：
　　$("info_table td").bind("click", function(){/*显示更多信息*/});
　　问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存。在这个例子的基础上，如果我们想实现一个简单的相册应用，每页只显示50张照片的缩略图，用户点击&第x页&（或&下一页&）链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下，似乎使用.bind()方法为50个单元格绑定事件又可以接受了。事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。即.bind()方法只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
　　事件委托可以解决上述两个问题。使用live()方法代替.bind()方法即可：
　　$("#info_table td").live("click",function(){/*显示更多信息*/});
　　这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。
　　live()方法并不完美，它有如下几个主要缺点：
$()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；
收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。
　　为了避免生成不必要的jQuery对象，可以使用一种叫做&早委托&的hack，即在$(document).ready()方法外部调用.live()：
　　(function($){
$("#info_table td").live("click",function(){/*显示更多信息*/});
　　})(jQuery);
　　在此，(function($){...})(jQuery)是一个&立即执行的匿名函数&，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。
为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：
　　$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});
　　这样，&受托方&就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，所以这里指定上下文对象时使用的是$("#info_table")[0]，即使用数组的索引操作符来取得的一个DOM元素。
.delegate()
　　如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决&事件传播链&过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
　　使用.delegate()，前面的例子可以这样写：
　　$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
　　使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：
直接将目标元素选择符（"td"）、事件（"click"）及处理程序与&受拖方&$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；
　　可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下，也可以使用.live()。
　　jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，增加了一对新的事件方法.on()和.off()。on() 方法可在被选元素及子元素上添加一个或多个事件处理程序。&off()&方法用来移除事件处理程序。如需添加只运行一次的事件然后移除，使用 one()方法。
　　使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
　　$(selector).on(event,childSelector,data,function,map)
　　如果传递了selector参数，那么on()&函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器childSelector参数的元素绑定事件处理函数。&on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素childSelector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器childSelector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。简单来说，如果指定childSelector，则为事件委托，否则就是常规的事件绑定。
提示：使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效
阅读(...) 评论()正文 jQuery事件绑定.on()简要概述及应用
jQuery事件绑定.on()简要概述及应用
发布时间： & 编辑：
前几天看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的，最后看源码发现bind()和delegate()都是由on()实现的，感兴趣的朋友可以了解下，或许本文对你有所帮助
.on( events [, selector ] [, data ], handler(eventObject) )一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。
在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处。比如：
如上图，将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。
注意到.on()的描述中第二个可选参数：selector。如下图，添加了第二个参数，选择符button：
当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。
注意.on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。下面是官方文档的一个例子：
最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。delegate()与on()同理，毕竟是用on()实现的：
您可能感兴趣的文章：一：什么是事件委托？
& & 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
二：为什么要用事件委托？
& & 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
& & 2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。
三：JavaScript中的例子
& & & 我们以下面的HTML代码为例，用事件委托的方式实现当鼠标单击某个li元素的时候，li元素的背景变成红色。
&ul id = "lists"&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&li&列表5&/li&
&li&列表6&/li&
&下面是JavaScript代码：
var lists = document.getElementById("lists");
lists.addEventListener("click",function(event){
var target = event.
//防止父元素ul也触发事件
if(target.nodeName == "LI"){
target.style.backgroundColor = "red";
单击列表4，实现效果：
&三：jQuery中的例子
& & jQuery中的事件委托方式比较丰富，就以同样的例子来说：
& &1、用on方法,代码如下：
$(function(){
$("#lists").on("click","li",function(event){
var target = $(event.target);
target.css("background-color","red");
2.用delegate（）方法，代码如下：
$(function(){
$("#lists").delegate("li","click",function(event){
var target = $(event.target);
target.css("background-color","red");
on()方法和delegate（）方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript。
3.用bind()方法，代码如下：
$(function(){
$("#lists").bind("click","li",function(event){
var target = $(event.target);
if(target.prop("nodeName")=="LI"){
target.css("background-color","red");}
bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM
元素添加添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话，用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live（）和delegate（）方法了，所以大家还是使用on（）方法吧。
阅读(...) 评论()