【jQuery事件中bind和on的区别】

#jQuery事件中bind和on的区别

#参数
一、bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数
二、on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。

1.on 可以多一个selector 参数,可以给子元素添加事件
bind 只能给自己添加事件
2. 使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的含有这个类名的子节点也有事件
3.on是jquery推荐使用的，bind是从某个版本开始就不推荐使用的

#事件冒泡
事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做
最直观的区别就是on绑定比bind绑定多一个参数’childSelector’

childSelector ：可选 规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

bind只能给符合条件的元素本身添加事件
on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件

<ul>
    <li>第一个子元素<li/>
    <li>第二个子元素<li/>
    <li>第三个子元素<li/>
</ul>

我们想给所有li添加click事件,可以用on:

$('ul').on('click','li', function () {   
        console.log($(this).text());
});

也可以用bind:

$('ul li').bind('click', function () { 
        console.log($(this).text());

有什么区别呢?
第一用on绑定实际上是委托给了父级ul,也就是只给 一个元素绑定了事件

第二个是用选择器选择了ul下的所有li元素 依次绑定了事件

假如有很多很多子元素区别就很大了, bind会严重影响性能!
假如这时候新添一个li:

$('ul').append('<li>第四个子元素<li>')；

如果是on绑定则这个li也会有点击事件
如果是bind则没有

#on的selector参数是筛选出调用.on方法的dom元素的指定子元素

从文档中可以看出，.on方法比.bind方法多一个参数’selector’

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$(‘ul’).on(‘click’, ‘li’, function(){console.log(‘click’);})就是筛选出ul下的li给其绑定click事件；

bind方法与on方法都是事件绑定，但是两者却又有着一个大区别：事件委托

当我们想要使用事件委托的时候，我们想到的肯定是on方法。而不是bind方法，因为相比bind方法，on方法多了一个selector方法，也就是子类选择器