关于jquery的事件委托-bind，live，delegate，on的区别发展

标签：委托   三种方式   document   不能   优势   数据   事件绑定   整合   one   

1.bind()方法 （只能给已经存在的元素上绑定事件）

只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

$(‘ul li‘).bind(‘click‘, function(){
 $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
});

2.live()方法（绑定到document DOM节点上。和.bind()的优势是支持动态数据）

jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象，但是生成了不必要的jQuery对象，导致性能损失；

(function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做“早委托”的hack，在整个dom元素加载之前调用live可以减少jquery对象的生成，解决上述缺点。(function($){...})(jQuery)是一个“立即执行的匿名函数”，这时候刚好document元素可用，而整个DOM还远未生成。

为解决“事件传播链”过长的问题，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

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

受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。只能放在直接选择的元素后面，不支持链接使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；

3.delegate()方法（更精确的小范围使用事件代理，性能优于.live()）

为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()

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

优点：（或者说解决了.live()方法的如下问题）：

直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；

支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

4.on()方法-1.9版本整合了之前的三种方式的新事件绑定机制

$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样

jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);//相反的方法

说明：

on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

关于jquery的事件委托-bind，live，delegate，on的区别发展

标签：委托   三种方式   document   不能   优势   数据   事件绑定   整合   one   

原文地址：http://www.cnblogs.com/suhaihong/p/6697999.html