事件委托，使用事件委托的好处是什么？

事件委托
事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件。

即：利用冒泡的原理，把事件加到父级上，触发执行效果。

**好处：

1. 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
2. 对于新添加的元素也会有之前的事件**

例子：ul中触发每个li来改变他们的背景颜色

HTML：

    
111111

    
222222

    
333333

 

 添加元素

JavaScript：

window.onload = function(){

  let oUl = document.getElementById('ul');

  let aLi = oUl.getElementsByTagName('li');

  let but = document.getElementById('button');

  let now = 3;

  // 事件源：event对象，不管在哪个事件中，只要你操作的哪个元素就是事件源

  // ie：window.event.srcElement

  // 标准：event.target

  oUl.onmouseover = function(e){

    let ev = e || window.event;

    let target = ev.target || ev.srcElement;

    if(target.nodeName.toLowerCase() == 'li'){

      target.style.background = 'red';

    }

  }

  oUl.onmouseout = function(e){

    let ev = e || window.event;

    let target = ev.target || ev.srcElement;

    if(target.nodeName.toLowerCase() == 'li'){

      target.style.background = '';

    }

  }

  but.onclick = function(){

    now ++;

    let newLi = document.createElement('li');

    newLi.innerHTML = 111111 * now;

    oUl.appendChild(newLi);

  }

}