jQuery bind和on的区别

一、bind、on

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

二、on和bind的区别

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

代码如下（示例）：

新添一个li: 如果是on绑定则这个li也会有点击事件,如果是bind则没有

// on()
$('#ul').on('click', 'li', function () {
        console.log($(this).text());
        $('#ul').append('<li>(on)我是li标签</li>')
    })

// bind()
$('#ul>li').bind('click', function () {
     console.log($(this).text());
     $('#ul').append('<li>(bind)我是li标签</li>')
})

三、bind、on 优缺点

bind()方法:
缺点:
1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；
2.动态添加元素时, 不能动态绑定事件
优点: 为单个元素绑定事件时书写方便.(忽略)
on()方法:
1.解决上面两个缺点.
2.采用事件委托机制, 不是直接为p元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在div内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素, 就会执行事件.
3.调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又会影响到性能.