JavaScript事件委托

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
• 优点：减少了事件处理程序，减少了内存占用