在繫結節點事件處理程式時遇到的問題：

• 每個 函式都是物件，都會佔用記憶體；記憶體中的物件越多，效能就越差。
• 其次，必須事先指定所有事件處理程 序而導致的 DOM訪問次數，會延遲整個頁面的互動就緒時間。

採用事件委託的優點:

• document 物件很快就可以訪問，而且可以在頁面生命週期的任何時點上為它新增事件處理程式 （無需等待 DOMContentLoaded 或 load 事件）。換句話說，只要可單擊的元素呈現在頁面上， 就可以立即具備適當的功能。
• 在頁面中設定事件處理程式所需的時間更少。只新增一個事件處理程式所需的DOM引用更少， 所花的時間也更少。
• 整個頁面佔用的記憶體空間更少，能夠提升整體效能。
• 繫結事件後,即使目標元素是以後再新增進來的也有效。
• 適合採用事件委託技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。

下面以給每個li 元素繫結click事件為例：

<ul class="container">
    <li class="item">li-1</li>
    <li class="item">li-2</li>
    <li class="item">li-3
 
</li>
    <li class="item">li-4</li>
    <li class="item">li-5</li>
    <li class="item">li-6</li>
</ul>

原生JS事件委託：

var _li = document.getElementsByTagName('li'),
    _ul = document.getElementsByTagName('ul')[0];

    /* 事件委託繫結事件 */
    _ul.onclick = function
 
 (e) {
        var _it = e.target;
        if (_it.tagName == 'LI') {
            // 能進裡說明當前點選的是LI元素
            console.log(_it.innerHTML);
        }
    }

jQuery事件委託：
on()方法

/*
 * .on()方法，jQuery 1.7新增，提供繫結事件處理程式所需的所有功能。幫助從舊的jQuery事件方法轉換，see .bind(), .delegate(), 和 .live().
* */
$('ul').on('click', 'li', function (e) {
   console.log(e.target.innerHTML);
});

delegate()方法

 $('ul').delegate('li', 'click', function (e) {
     console.log(e.target.innerHTML);
 });

live()方法

/*
* 從 jQuery 1.7 開始，不再建議使用 .live() 方法。請使用 .on() 來新增事件處理。使用舊版本的使用者，應該優先使用 .delegate() 來替代 .live()。
* */
$('li').live('click', function (e) {
    console.log(e.target.innerHTML);
});

End.