练习：事件委托1. 简版 2. 改进

1. 简版

<body>
  <ul>
    <li>子元素01</li>
    <li>子元素02</li>
    <li>子元素03</li>
    <li>子元素04</li>
    <li>子元素05</li>
  </ul>
</body>

const ul = document.querySelector("ul");
ul.addEventListener("click", (e)=>{
  if(e.target.tagName.toLowerCase() === 'li'){
    console.log(e.target.textContent)
  }
})

2. 改进

当li中又有个span时，上面的事件委托就触发不了了，所以需要获取被点击元素的祖先元素，判断是否匹配

<body>
  <ul>
    <li><span>子元素01</span></li>
    <li><span>子元素02</span></li>
    <li><span>子元素03</span></li>
    <li><span>子元素04</span></li>
    <li><span>子元素05</span></li>
  </ul>
</body>

const ul = document.querySelector("ul");
ul.addEventListener("click", (e)=>{
  let el = e.target;
  while(true){// 使用递归找它的祖先元素
    if(el.tagName.toLowerCase() === "li"){
      console.log(el.innerText);
      return 
    }else{
      el = el.parentNode;
    }
  }
})