JavaScript事件委托

• 原理：利用事件的冒泡原理，當你點擊ul>li時，會從最深的節點開始向外傳播li>ul，當ul里面有很多li時，可以把這一類的li的事件處理都委托給父級ul代為執行
• 舉例

<ul id="ul1"> 
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
</ul>

//給每個li都綁定事件
window.onload = function(){ 
  let oUl = document.getElementById("ul1");
  let aLi = oUl.getElementsByTagName('li');
  for(let i=0;i<aLi.length;i++){
    aLi[i].onclick = function(){
      console.log(aLi[i].innerText);
    }
  }
}
//把所有的li事件都委托給父級ul來處理
window.onload = function(){
  let ul = document.getElementById("ul1");
  ul.onclick = function(event){
    let e = event || window.event;
　  //標準瀏覽器用e.target，IE瀏覽器用event.srcElement
    let target = e.target || e.srcElement;　
    if(target.nodeName.toLowerCase() == 'li'){
      　 alert(target.innerHTML);
    }
  }
}

• 總結：適合用事件委托的事件click，mousedown，mouseup，keydown，keyup，keypress
• 優點：減少了事件處理程序，減少了內存占用