JavaScript事件委托

• 原理：利用事件的冒泡原理，當(dāng)你點(diǎn)擊ul>li時(shí)，會(huì)從最深的節(jié)點(diǎn)開(kāi)始向外傳播li>ul，當(dāng)ul里面有很多li時(shí)，可以把這一類的li的事件處理都委托給父級(jí)ul代為執(zhí)行
• 舉例

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

//給每個(gè)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事件都委托給父級(jí)ul來(lái)處理
window.onload = function(){
  let ul = document.getElementById("ul1");
  ul.onclick = function(event){
    let e = event || window.event;
　  //標(biāo)準(zhǔn)瀏覽器用e.target，IE瀏覽器用event.srcElement
    let target = e.target || e.srcElement;　
    if(target.nodeName.toLowerCase() == 'li'){
      　 alert(target.innerHTML);
    }
  }
}

• 總結(jié)：適合用事件委托的事件click，mousedown，mouseup，keydown，keyup，keypress
• 優(yōu)點(diǎn)：減少了事件處理程序，減少了內(nèi)存占用