1、事件委託與事件繫結概念

• 事件繫結：將普通的事件event繫結在DOM節點上，當DOM節點被選中時，將事件與之繫結，方便使用者提供相應的操作。比如：在button按鈕上繫結click滑鼠事件，在input中繫結focusin焦點事件等等，具體的例如：常常在程式碼中這樣寫$('.bn1').click(function(){...})就是普通的事件繫結。
• 事件委託：是指在事件繫結的基礎上補充與擴充套件事件繫結，具體就是指：通過子節點元素繫結事件來傳遞給父元素DOM節點（祖先節點）來統一管理其全部後代子元素。這樣遇到需要繫結很多事件的子元素時，就避免了很多麻煩重複繫結事件的工作，提供了訪問效率。具體程式碼$('.div').on('click','.bn2',function(){...})
  
  在網上有這樣的例子：事件委託好比學校門衛收發室代收快遞,100個學生快遞都到了，不可能都擠到學校大門口去拿快遞，這時候就需要門衛快遞收發室進行委託代收快遞，之後一一核實，學生們就可以去領快遞了。不會造成擁堵的情況出現，也不會出現拿錯了快遞等情況，期間如果有新的學生加入到該學校，他也需要拿快遞，門衛收發室就核實他的身份，同樣的一視同仁委託代收他的快遞。

2、具體的例項

通過具體的例項，可以加深理解事件繫結與事件委託。
（1）事件繫結：通過對button按鈕繫結click事件，之後動態增加button按鈕不被監聽繫結
html程式碼：

<div class="myDiv1"
 
 style="border: 1px solid #F00; width: 500px;height: 150px;">
    <button class="bn1">事件繫結</button>
    <p></p>
</div>
<button id="addButton1">點我新增bn1按鈕</button>

jquery程式碼：

//增加新按鈕在div中
$('#addButton1').click(function(){
    $('<button class="bn1">新按鈕...</button>'
 
).appendTo('.myDiv1');
});
$('.bn1').click(function(){
    $(this).next().text($(this).text());
});

結果為：

只有之前的bn1才能被繫結click事件，之後增加的新按鈕無法被繫結，這就是事件繫結的弊端，無法實現動態繫結。如果myDiv1中有n個不同的buttton，每個都要重複繫結click事件，造成嚴重浪費。
（2）事件委託：通過對button按鈕繫結click事件，之後動態增加button按鈕被監聽繫結click事件。
html程式碼：

<div class="myDiv2" style="border: 1px solid #F00; width: 500px;height: 150px;">
    <button class="bn2">按鈕1...</button>
    <button class="bn2">按鈕2...</button>
    <button class="bn2">按鈕3...</button>
    <p></p>
</div>
<button id="addButton2">點我新增bn2按鈕</button>

jquery程式碼：

$('#addButton2').click(function(){
    $('<button class="bn2">新按鈕...</button>').appendTo('.myDiv2');
});

//2.事件委託    
$('.myDiv2').on('click','.bn2',function(){ 

    $(this).siblings('p').text($(this).text());
});

結果為：

能對到新增的按鈕繫結click事件。同時對其下所有的bn2繫結事件，這是委託給了父節點div（class=myDiv2）,讓其找到其下的子節點按鈕bn2進行繫結事件click。
在myDiv2外層中增加parentDiv，利用事件委託可以找到在parentDiv下的所有bn2的按鈕並且繫結click事件。

$('.parentDiv').on('click','.bn2',function(){
    $('.myDiv2 p').text($(this).text());
});

下面通過圖示進行理解：
被委託的父節點找到其children中所有的bn2按鈕繫結click事件。此時也包括了新增加的bn2按鈕，對父節點下的所有節點進行監聽，一有新的bn2加入就會被繫結click事件。