关于jquery中的bind()、live()、delegate()的区别分析浅析

近来在研究JS的时候，小码哥又一次看到jquery中常见的几种绑定事件的方法：bind()，live(),delegate()。因此，闲来无事，想把他们几个做一下系统的分析，一遍后面的码农们能够一起分享！

先说好，鄙人也算是JS的初学者，很复杂的模块啥的，也是略懂而已，要是有码神看到，可别Ma我哈！！

那好，下面就直接进入主题了~

首先，分别介绍一下这三个方法：

1、bind()——$(selector).bind(event,data,function);

    event 为必需，规定添加到元素上的一个或多个事件，由空格分隔多个事件，必需是有效事件

    data  可选，规定传递到函数的额外数据，一般用不到

    function  必需，规定当事件发生时运行的函数。

实例：

    $("button").bind("click",function(){

        $("p"),slideToggle();//slideToggle()方法是鼠标点击切换

    })

还可以对同一个元素添加多个事件：$(selector).bind(event:function,event:function,....);

    $(document).ready(function(){

        $("button").bind(click:function(){

            $("p").slideToggle();

        },

        mouseover:function(){

            $("body").css({‘background‘,‘red‘;})

        },

        mouseout:function(){

            $("body").css(‘background‘,‘#fff‘);

        });

    });

2、live()——$(selector).live(event,data,function);

    event 为必需，规定添加到元素上的一个或多个事件，由空格分隔多个事件，必需是有效事件

    data  可选，规定传递到函数的额外数据，一般用不到

    function  必需，规定当事件发生时运行的函数。

实例：

    $("button").live("click",function(){

        $("p").slideToggle();

    })

    live()方法有一个好处就是可以为HTML还不存在（即由JS脚本临时创建的新元素上添加事件）

3、delegate()——$(selector).delegate(childSelector,event,data,function);

    childSelector  必需，规定要附加事件处理程序的一个或多个子元素。

    event  必需，规定附加到元素上的一个或多个事件。

    由空格分隔多个事件值，必需是有效事件。

    data 可选，规定传递到函数的额外数据。

    function 必需，规定当事件发生时运行的函数。

    delegate()方法同样可以为HTML还不存在（即由JS脚本临时创建的新元素上添加事件）。

实例：

    $(‘div‘).delegate(‘button‘,‘click‘,function(){

        $("p").slideToggle();

    })

下面就来分析一下他们的异同：

首先，单看简单的针对某个元素进行事件绑定，他们之间貌似没有多少区别，都可以实现简单的事件绑定，且他们都是遵循事件冒泡（事件传播）方式查询要绑定事件的元素。

但bind()方法，却不能像live()和delegate()方法那样，为未来（即由JS脚本新生成和创建的元素）添加事件绑定。bind()方法只能对HTML中已经存在的元素添加绑定事件。

live()方法有一个最大的缺点，就是它仅能针对直接的CSS选择器做操作，这使得它变得非常不灵活。

在live()和delegate()之间，唯一的差别就在于它们在对要绑定事件的元素的获取速度上有差异。在事件传播上，后者要比前者的速度更快一点，只因后者的限制条件更精准一些。这可以从它们的绑定事件的结构来看出来。

鉴于以上分析，我们更倾向于live()和delegate()方法。而这两者，有倾向与后者。

但，对于停止事件传播来说，bind()方法会高效而直接。因此，我们平时用来阻止事件传播时，会选择bind()方法：

$(‘a‘).bind(‘click‘,function(e){

    e.preventDefault();

    e.stopPropagation();

});

只因其他两种方法由于事件冒泡而耽误了时间。

本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1597328