jQuery中.bind() .live() .delegate() .on()的差别

 差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

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

例子

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

代码如下	复制代码
$("a").bind("click",function(){alert("ok");});

例如为一个button添加一个click。可以这样操作 
XML/HTML代码
Html代码

代码如下	复制代码
<input type='button' id='myBtn'>      <input type='button' id='myBtn'>

 
这是一个button，现在我们要为他添加一个事件
JavaScript代码

代码如下	复制代码
Js代码 <script>        $('#myBtn').bind("click",function(){            alert('click');        });        </script>      <script> $('#myBtn').bind("click",function(){ alert('click'); }); </script>

 
这样，我们就为这个button绑定了一个click的事件。
bind函数可以有三个参数，当第二个参数不是一个函数，而是一个数据对象时，它将默认做为bind第三个参数（函数）的参数。例如：
XML/HTML代码
Js代码

代码如下	复制代码
<script>       function showAlert(events){            alert(events.data.foo);        }        $('#myBtn').bind('click',{foo:'click'},showAlert);        </script>      <script> function showAlert(events){ alert(events.data.foo); } $('#myBtn').bind('click',{foo:'click'},showAlert); www.111cn.net </script>

 
点击时，同样会显示:click
这些就是bind的一些基本用法，当然还有一些方法
比如在绑定方法的时候，用的是return false;可以让这个方法失效
Js代码

代码如下	复制代码
<script>        $('#myBtn').bind('click',function(){        return false;        })        </script>      <script> $('#myBtn').bind('click',function(){ return false; }) </script>

 
这样，刚才绑定的click又失效了，不过，这种方法往往用在submit提交的时候比较多。
还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation
例：
Js代码

代码如下	复制代码
<script>        $('#myBtn').bind('click',function(event){        event.preventDefault();//取消默认的click行为        });        $('#myBtn').bind('click',function(event){        event.stopPropagation();//阻止click事件起泡        });               </script>

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

代码如下	复制代码
$("a").live("click",function(){alert("ok");}); $('.clickme').live('click', function() {         alert("Live handler called.");       });   然后再添加一个新元素： $('body').append(' Another target ');

 
然后再点击新增的元素，他依然能够触发事件处理函数。 

事件委托
.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：
1、生成一个click事件传递给
来处理
2、由于没有事件处理函数直接绑定在
上，所以事件冒泡到DOM树上
3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live() 绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
6、如果找到了匹配的元素，那么调用原始的事件处理函数。
 
由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

代码如下	复制代码
$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

由此扩展开来的几个以前常见的方法有.

代码如下

复制代码

bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); 　　$("p").on("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); delegate() 　　$("#div1").on("click","p",function(){ 　　　　$(this).css("background-color","pink"); 　　}); 　　$("#div2").delegate("p","click",function(){ 　　　　$(this).css("background-color","pink"); 　　}); live() 　　$("#div1").on("click",function(){ 　　　　$(this).css("background-color","pink"); 　　}); 　　$("#div2").live("click",function(){ 　　　　$(this).css("background-color","pink"); 　　});

以上三种方法在jQuery1.8之后都不推荐使用 

.On()

 其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

 

看一下，我们用如何用.on()来改写前面通过 .bind(), .live(), .delegate()所注册的事件：

/* The jQuery .bind(), .live(), and .delegate() methods are just one line pass throughs to the new jQuery 1.8.2 .on() method */// Bind$( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live$( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} );// Delegate$( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

• 提供了一种统一绑定事件的方法
• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题
• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
• 我们可以用.on()来代替上述的3种方法