jQuery事件绑定on()、bind()与delegate() 方法详解

jquery中有四种事件绑定函数，bind()，live()，on()，delegate(),由于live现在并不常用，因此不做过多解释。

1. bind()用法

$("div p").bind("click",function(){
    alert("点击");
});
同：
$("div p").click(function(){
    alert("点击");
});

这里为div绑定了click事件，相应为弹出内容，绑定简单快捷，但是存在两个问题：
1；用了隐式迭代方法，如果匹配的元素特别多，例如div中有多个p标签，方法就绑定多次，影响性能。
2；对于尚未存在的元素无法绑定，点击页面上的按钮，将动态添加一个p元素，点击这个p元素会发现动作没有响应。
   用delegate方法可以解决以上问题。
 
2.delegate()用法

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

这种方式采用了事件委托概念，不直接为p元素绑定事件而是为其父元素（或者祖先元素也可）绑定事件，当在div内点击任意元素时，事件一层层根据event target向上冒泡，直到到达绑定事件的元素，在冒泡过程中，如果事件的currentTarget与选择器匹配，就会执行代码。

这样就解决了bind（）的问题，不用再一个个为p元素绑定事件，也可以为动态添加进来的p元素绑定，甚至如果将事件绑定到document上，不用等document准备就可以执行绑定。不过冒泡的方式也有会存在性能问题。

3.on()用法

on()将之前的绑定事件方法做了统一无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了。因此我在工作中用的比较多的是on()。

on()在1.7版本之后出现。以上的代码便可以如下来改写：

$("div").on("click","p",function(){
    alert($(this).text());
})

有绑定事件自然也有移除事件，以上的方法对应的解绑事件分别是：

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

当然我们可以根据自己的需要来选用合适的方法，需要注意的是：

1.选择器匹配到的元素比较多时，不要用bind()迭代绑定。

2.用id选择器时可以用bind()。

3.需要给动态添加的元素绑定事件时，用delegate(),或者on()。

4.用delegate(),和on()，dom树不要太深。

5.尽量使用on()