jQuery绑定事件on和bind的区别

bind和on都是给元素绑定事件用的，其最大的区别就是事件冒泡
事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类去做

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

也就是对于新添加的元素如果是on绑定，符合条件的新元素也会绑定事件 如果是bind则不会影响新元素

如下例子：

<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元素 依次绑定了事件

假如再新添一个li：

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

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