在引入事件委托之前，首先來看下麵這個例子：點擊改變li的背景顏色。
在引入事件委托之前，首先來看下麵這個例子：點擊改變li的背景顏色。
<ul id="container"> <li>1</li> <li>2</li> <li>2</li> <li>3</li> <li>4</li> </ul>
window.onload = function () { var liLis = document.getElementsByTagName('li'); for (var i = 0; i < liLis.length; i++) { //addEventListener不相容ie9以下版本，請自行用attachEvent做相容處理 liLis[i].addEventListener('click', function (ev) { //相容ie低版本 var ev = ev || window.event; var target = ev.target || ev.srcElement; target.style.background = 'red'; }, false) } }上面可以做到，點擊li，改變li的背景顏色為紅色。但是請思考一個問題，如果頁面存在很多的li，那麼使用for迴圈給所有的li都綁定click事件的話就將直接影響到頁面的整體運行性能，原因是每個函數都是對象，都會占用記憶體，記憶體中的對象越多，性能就越差，其次事先指定所有事件處理程式而導致DOM訪問次數，會延遲整個頁面的交互就緒時間。針對“事件處理程式過多”這個問題，事件委托這個解決方案就誕生了。 那麼什麼是事件委托呢？事件委托就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一類型的所有事件。說簡單點兒，上面的click事件我不用給每個li都綁定，只需在ul（DOM樹中儘量高的層次上）上綁定一個click事件，就可以管理所有li的click事件。 下麵請看實現代碼。
window.onload = function () { var ul = document.getElementById('container'); //addEventListener不相容ie9以下版本，請自行用attachEvent做相容處理 ul.addEventListener('click', function (ev) { //相容ie低版本 var ev = ev || window.event; var target = ev.target || ev.srcElement; //nodeName:找到元素標簽名 if (target.nodeName.toLowerCase() == 'li') { target.style.background = 'green'; } }, false) }上面這麼做的好處：頁面中設置事件處理程式所需時間更少，只添加一個事件處理程式所需的DOM引用更少，所花的時間也更少；整個頁面占用的記憶體空間更少，能夠提升整體性能。 註意：1.對於使用appendChild方法添加的元素，在使用事件委托後，也能夠綁定上事件；2，最適合採用事件委托技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress。雖然mouseover和mouseout事件也冒泡，但是要適當處理它們並不容易，而且經常需要計算元素的位置。（因為當滑鼠從一個元素移到其子節點時，或者當滑鼠移出該元素時，都會觸發mouseout事件 ）這點請讀者自行驗證。
