jQuery中的事件绑定/委托

jQuery的事件委托和绑定其实是一个非常重要的内容，之前可能用on或者bind比较多，但最近做页面发现其实应该把这些东西总结一下，根据情况选择最恰当的方式。

主要探讨的是以下事件：delegate()、bind()、on()通过例子和对比来加深印象。

$('a').bind('click',function(){alert("ok");})

其实可以简写为：

$('a').click(function(){alert("ok");})

这样就好懂多了吧。

bind有两个问题：

1.当匹配的元素过多，比如页面有40个a标签，就得执行40次绑定，影响性能；

2.对于页面上还未存在的元素，就算动态添加后，是无法执行这个绑定事件的。

而delegate()恰好可以解决这两个问题。

$(*selector*).delegate(*childSelector*,*event*,*data*,*function*)

delegate()方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理，使用这个方法的事件处理程序适用于当前或未来的元素。

这是怎么理解呢？对比一下bind：

$('a').bind('click',function(){alert("ok");})

这是bind的用法，给页面的a元素绑定一个点击事件，点击后弹出内容。

那么用delegate是这样的：

$(document).delegate('a', 'click', function() { alert('ok;)});

bind直接将方法绑定到独立的元素上，但它不能将方法绑定到一个暂时还未出现的元素上。而delegate方法是将事件方法绑定到一个需要作用的元素它的父元素上，那么这个元素是否已经存在都可以被处理。

另外，将一个方法绑定到一个或者一组父元素比直接为页面上的每个元素（特别是数量很多的情况下）绑定方法无疑更有效率。

live()方法在jq1.9版本已经被删除，用on来代替。

之前我们这么写：

$('a').live('click',function(){alert("ok");})

现在用on需要这么写

$(document ).on('click','a',function(){alert("ok")})

再解释一遍，我的页面有一个id为a的div，我将要在它里面动态添加一个class为b的子元素，然后给这个b绑定一个事件，我需要这么写：

$('#a').on('click','.b',function(){}）

是不是跟delegate()很像…

它也可以这么使用：

$('a').bind('click',function(){alert("ok");})

$('a').on('click',function(){alert("ok");})

也就是说on()方法可以替代live()，可以替代delegate(),也可以替代bind().

综上，on()是最为推荐的方法。但是根据情况仍然可以选择其他适合的替代写法。

除此之外，如需溢出事件绑定，可以用off()方法：

$('a').off('click')

添加只运行一次的事件然后移除，可使用one()方法。