事件委托是什么

把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统一处理，减轻对event listener的管理负担。

为什么要有事件委托

1.监听还不存在的元素或者已经存在的元素
2.减少监听器的个数

如何做到事件委托

<body>
  <button id="xxx">取号</button>
  <ul>
    <li>
      <ol id="yyy"></ol>
    </li>
  </ul>
  <script>
    let button = document.querySelector("#xxx");
    let yyy = document.querySelector('#yyy');
    button.addEventListener('click',function(){
      let number = parseInt(Math.random() * 100, 10);
      let li = document.createElement('li');
      let span = document.createElement('span');
      span.textContent = number;
      li.appendChild(span);
      yyy.appendChild(li);
    });
    yyy.addEventListener('click',function(e){
      let element = e.target;
      while(element.tagName !== "LI"){
        if(element === yyy){
          element = null;
          break;
        }
        element = element.parentNode;
      }
      element && element.remove()
    })
  </script>
</body>

用户先点击取号，再点击li元素或者span元素时，就执行ol元素的监听事件，把点击的li元素或span元素删除，不用监听每个元素，监听它们的父元素即可。