【bind和on的区别】

1、参数

bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数
on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。
on比bind多一个selector参数,可以给子元素添加事件. bind 只能给自己添加事件
比如给盒子下p添加事件，on可以但是bind做不到

<div id="box_1">
      <p>我是文本1</p>
    </div>
    <div id="box_2">
      <p>我是文本2</p>
    </div>

$("#div1").on("click", "p", function () {
      console.log(this);
    });
    $("p").bind("click", function () {
      console.log(this);
    });

2、事件冒泡

bind只能给符合条件的元素本身添加事件
on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件
也就是对于新添加的元素如果是on绑定,符合条件的新元素也会绑定事件,
如果是bind则不影响新元素
on会产生事件冒泡，bind不会

<ul>
        <li>我是一号</li>
        <li>我是二号</li>
        <li>我是三号</li>
    </ul>

on

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

bind

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

on和bind都可以实现，但是添加一个新的li

 $("ul").append("<li>我是四号<li>");

on

bind

on绑定的这个li也会有点击事件然而bind绑定的没有

3、推荐

on是jquery推荐使用的
bind是从某个版本开始就不推荐使用的