什麽是事件代理？DOM2.0標準事件模型的三個階段
阿新 • • 發佈：2017-11-01
logs 效果 function 如果 param 必須 操作dom 彈出 認識
冒泡階段：事件流從目標元素向頂層元素折回，遇到綁定事件，即執行（該階段在IE6中不存在）；
體驗更優排版請移步原文：http://vblog.win/blogs/programming/js-event-delegation.html
事件代理，又稱事件委托（Delegation），就是將處理事件委派到父元素或者頂級元素上，利用事件的冒泡機制，管理某一類型元素上的所有事件。
要理解這個概念，必須先對事件模型有個初步的了解。W3C定義的DOM2.0標準事件模型分為三個階段：
- 捕獲階段
- 目標階段
- 冒泡階段
捕獲階段：當某個元素觸發事件時，頂層對象document會發出一個事件流，隨著DOM樹向著目標元素流去直到到達目標元素，途徑的元素如果綁定了事件，在這個階段是不會執行的；
冒泡階段：事件流從目標元素向頂層元素折回，遇到綁定事件，即執行（該階段在IE6中不存在）；
因此我們發現，在元素綁定事件時，完全可以綁定在該元素的任一上級元素上再進行事件處理即可。那麽，事件代理具體怎麽應用呢？
例如，頁面中有這樣一個無序列表，需要給每個li添加點擊事件，彈出相應內容，如果我們通過for循環為每個li單獨綁定click事件，由於元素數量過多無疑會造成網頁性能下降，有內存泄露的風險。
| 1 2 3 4 5 6 7 8 |
<ul id="ul-test"> |
如果將click事件綁定在ul元素上，
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | window.onload = function(){ var ulEle = document.getElementById("ul-test"); ulEle.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ alert(target.innerHTML); if(target.id == ‘li-3‘){ alert(‘click li-3‘); } } } } |
上述代碼中，我們只需要綁定一次事件，通過Event對象的target屬性返回事件源（即事件的目標節點），可以做不同的處理，這就是事件代理，原本需要目標元素處理的事件，交由其父元素代為執行。采用事件代理避免了頻繁的操作DOM，優化效果可想而知。
以上只是對事件代理的基本認識和應用，更深層次應用有待挖掘。
什麽是事件代理？DOM2.0標準事件模型的三個階段