JQuery事件绑定函数中的bind,live,delegate,on的差别？

bind：把事件绑定到每一个匹配的元素上，主要特点

1.兼容性比较好

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

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

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

html代码

<ul id="ul">
    <li>NO1</li>
    <li>NO2</li>
    <li>NO3</li>
    <li>NO4</li>
    <li>NO5</li>
</ul>

JavaScript代码

$("li").bind("click", function (event) {
    alert("OK");
});

Jquery代码：

调试数据：

bind需要循环5次来绑定事件！

 

live：把所有的事件都绑定到jquery对象$(document) ，主要特点：

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

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

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

JavaScript代码

$("li").live("click", function (event) {
    alert("OK");
});

jquery源码同bind

调试数据

live只执行一次，事件绑定在根节点对象上。

delegate：将事件绑定到指定的父元素上，和live类似但比较能活。主要特点：

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

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

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

JavaScript代码

$("#ul").delegate("li", "click", function (event) {
    alert("OK");
});

调试数据

delegate只执行一次，事件绑定在调用对象上。

--------------------- 
以上代码来源：https://blog.csdn.net/lxcao/article/details/52734965 

 

on()和bind()的区别

on()和bind()的函数签名如下：

bind(type, [data], fn)
 
on(type,[selector],[data],fn)

可以看到2个函数的区别在于：是否支持selector这个参数值。由于javascript的事件冒泡特性，如果我们在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。如果使用on的时候，不设置selector，那么on与bind就没有区别了。

<div id="parent">
    <input type="button" value="a" id="a"/>
    <input type="button" value="b" id="b"/>
</div>

上面这段代码，如果我们使用bind()在parent上绑定了click事件处理函数，当点击a或者b按钮的时候，都会执行事件处理函数。如果我们希望点击a的时候触发，点击b的时候不触发，那么可以使用on，代码如下：

$("#parent").on("click","#a",function(){
    alert($(this).attr("id"));
});

可以看到：on()函数的参数selector就是为了在事件冒泡的时候，让父元素能够过滤掉子元素上发生的事件。如果使用了bind，那么就没有这个能力，子元素上发生的事件一定会触发父元素事件。

--------------------- 
以上代码来源：https://blog.csdn.net/aitangyong/article/details/43673535