標籤：bubble log 廠商 class www. 一個 utf-8 onclick append
事件委託又稱事件代理，即利用事件的冒泡機制
那我們在什麼時候用事件委託呢？在需要添加事件的元素很多並且這些元素需要頻繁增刪且不能重新整理的的時候我們就需要事件委託了，例如我們在用JavaScript寫一個todoList時就需要用到事件委託
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>事件委託</title><script>window.onload = function(){ var oUl = document.getElementById(‘oul‘); var aLi = oUl.getElementsByTagName(‘li‘); var btn = document.getElementById(‘btn‘); var Count = 0; oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ console.log(target) } }; btn.onclick = function(){ Count++; var oLi = document.createElement(‘li‘); oLi.innerHTML = 111 * Count; oUl.appendChild(oLi); };};</script></head><body><button id="btn">添加</button> <ul id="oul"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li></ul></body></html>
這就是事件委託的簡單案例，通過將事件拋給上層的ul而通過檢查事件的目標對象（target）來判斷並擷取事件來源li;
為父節點添加一個點擊事件，然後當點擊子節點時，click會向上冒泡，而父節點捕獲該事件之後通過target.nodeName來判斷是否為我們需要操作的節點，
事件冒泡及捕獲
瀏覽器的事件冒泡機制,對於事件的捕獲和處理，不同的瀏覽器廠商有不同的處理機制，這裡介紹W3C對DOM2.0定義的標準事件。
DOM2.0模型將事件處理流程分為三個階段：
（1）事件捕獲階段 （2）事件目標階段 （3）事件起泡階段
事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨著DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函數是不會被觸發的。
事件目標：當到達目標元素之後，執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數，那就不執行。
事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來阻止事件的冒泡傳播。
js事件委託
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
