jQuery事件绑定与事件委托实例讲解，jQuery的方法bind,live,delegate,on的区别

jquery的方法bind,live,delegate,on的区别

一、on方法

---

　on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 
　on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）  

$(selector).on(event,childselector,data,function)

event：

必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 `$(selector).on("click",childselector,data,function);`
多事件处理：

1.利用空格分隔多事件，例如

 $(selector).on("click dbclick mouseout",childseletor,data,function);

2.利用大括号灵活定义多事件，例如
$(selector).on({event1:function, event2:function, ...},childselector);　
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

childselector:

 可选；需要添加事件处理程序的元素，一般为selector的子元素；　　  

data：

可选；需要传递的参数；

function：

必需；当绑定事件发生时，需要执行的函数； 

与另外三种方式的转化

1.使用on方法，如果第二个参数使用null，则作用与bind( )相同；

2.如果第二个参数适用了选择器，就要看调用对象

    i.如果调用对象是$(document)，则作用与live( )相同，

    ii.否则与delegate()相同，

优点

1.为各种事件绑定方法带来了统一性
2.简化了jquery代码库，并删除一个界别的重定向，因为通过调用这个方法实现了 .bind() .live() 和 .delegate()
3.仍然提供了好用的.delegate()方法，但是也仍然对.bind()方法提供了支持

缺点

因为调用这个方法的各个形式，会带来一些混乱

特点：

1.事件的添加和卸载都要是通过on来实现的，提供一种统一的事件处理方法。
2.增加了使用的难度，对于不熟悉on的使用的，很有可能就勿用，导致性能下降。

二、bind方法

---

bind()向匹配元素添加一个或多个事件处理器。  

$(selector).bind(event,data,function)

　event：

必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

单事件处理：例如 $(selector).bind("click",data,function);

多事件处理：

1.利用空格分隔多事件，例如

$(selector).bind("click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件，例如

 $(selector).bind({event1:function, event2:function, ...})　

3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　
data：

可选；需要传递的参数；

function：

必需；当绑定事件发生时，需要执行的函数； 

<script type="text/javascript">
        $(function () {

             /*********添加单个事件处理*********/

             $(".btn-test").bind("click", function () {
                 //显示隐藏p
                 $(".container").slidetoggle();
             });

            /********添加多个事件处理********/

            //空格相隔方式
             $(".btn-test").bind("mouseout click", function () {
                //显示隐藏p
                 $(".container").slidetoggle();
             });

             //大括号替代方式
            $(".btn-test").bind({
                 "mouseout": function () {
                     alert("这是mouseout事件!");
                 },
                 "click": function () {
                     $(".container").slidetoggle();
                 }
             });

             /********删除事件处理********/
             $(".btn-test").unbind("click");

         });
     </script>

主要特点

1.兼容性比较好

2.绑定事件到所有选出来的元素上

3.不会绑定事件到动态添加的那些元素上

4.当元素很多时，会出现效率问题，特别是嵌套层次比较深的元素。

三、live方法

---

live() 向当前或未来的匹配元素添加一个或多个事件处理器；把所有的事件都绑定到jquery对象
$(document) ，  

$(selector).live(event,data,function)

   /********删除事件处理********/  
   $(".btn-test").die("click");

参数用法和bind相同

主要特点：

1.事件只需要绑定一次，不需要绑定到筛选出来的元素上。

2.动态添加元素后依然拥有绑定事件。

3.不能使用event.stoppropagation() 来阻止事件的冒泡。

四、delegate()方法

---

　delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。将事件绑定到指定的父元素上，和live类似但比较能活。

$(selector).delegate(childselector,event,data,function)

childselector:

必需项；需要添加事件处理程序的元素，一般为selector的子元素；

event：

必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

单事件处理：例如 $(selector).delegate(childselector,"click",data,function);

多事件处理：

1.利用空格分隔多事件，例如

$(selector).delegate(childselector,"click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件，例如

 $(selector).delegate(childselector,{event1:function, event2:function, ...})　

3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　
data：

可选；需要传递的参数；

function：

必需；当绑定事件发生时，需要执行的函数；

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script><script type="text/javascript"> $(function () { /***********单元素添加单事件***********/ //按钮绑定单击事件 实现p的显示隐藏 $(".header").delegate("#btn-test1", "click", function () { $(".container").slidetoggle(); }); /***********单元素添加多事件***********/ //空格相隔方式 $(".header").delegate("#btn-test1", "click mouseout", function () { $(".container").slidetoggle(); }); //大括号替代方式 $(".header").delegate("#btn-test1", { "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slidetoggle(); } }); }); </script>

主要特点：

1.可以用在动态添加的元素上

2.绑定的父元素可以采用就近原则，减少查询的次数，比live的性能好

3.在live和delegate两者推荐使用delegate

五、直接绑定和事件委托的区别

如果on()方法的selector 参数为空，事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素，译者注)发生事件时，无论这个事件发生在这个元素上还是从内层元素经冒泡而来，该处理程序都会被调用。并且，如果on()方法的selector 参数为空，它与bind()方法相同——只能绑定页面已有元素的事件。 如果on()方法的selector 参数不为空，事件处理程序就被称为委托。当事件直接发生在被绑定的元素上(如下例中绑定到document上，译者注)时，该程序不会被调用，而只有当事件发生在与选择器匹配的内部元素上(如下例中click事件发生在button上，译者注)时，才会调用该程序。