第52天 [js] 什么是事件委托？它有什么好处？能简单的写一个例子吗？

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

事件委托的作用
利用冒泡的原理，将事件加到父级身上，触发执行效果，这样只在内存中开辟一块空间，既节省资源又减少DOM操作，提高性能
可以为动态添加的元素绑定事件
js实现事件委托的三大步骤：
第一步：给父元素绑定事件

给元素ul添加绑定事件，通过addEventListener为父元素绑定事件

第二步：监听子元素的冒泡事件

这里默认是冒泡，点击子元素li会向上冒泡

第三步：找到是哪个子元素的事件

通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标

案例：ul中触发每个li来改变他们的背景颜色
<ul id='ul'>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul>
<button id='button'>添加元素</button>
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);
  }
}