事件代理

如果一个节点的子节点是动态生成的，那么子节点需要注册的事件应该注册到父节点上。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.getElementById('ul');
    ul.addEventListener('click',event=>{
      event = event || window.event;
      const target = event.target || event.srcElement;
      if(event.target.nodeName.toLowerCase()==='li'){
        console.log(target.innerHTML);
      }
    })
  </script>
</body>
</html>

优点：

  1. 节省内存

  2. 不需要给子节点注销事件