bind和on都是給元素繫結事件用的,其最大的區別就是事件冒泡

事件冒泡也是委託事件的原型，事件委託就是子類的事情委託給父類的去做

最直觀的區別就是on繫結比bind繫結多一個引數'childSelector'

語法

$(selector).on(event,childSelector,data,function)

$(selector).bind(event,data,function,map)

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

假如有很多很多子元素區別就很大了, bind會嚴重影響效能!

假如這時候新添一個li:

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

如果是on繫結則這個li也會有點選事件

如果是bind則沒有