JS基础之事件委托

什么是事件委托？

MDN上这么说
事件委托：这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器。

题目：

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

问题:

1.如何为ul中的li添加点击事件？

const elLis = Array.from(document.getElementsByTagName('li'))
// 使用Array的from方法可以使dom的伪数组对象转为数组，这样就可以愉快的使用forEach了 顺便也能在面试官面前装个*
elLis.forEach(elLi => {
  elLi.addEventListener('click', (event) => {
    console.log(event.target.innerHTML)
  })
})

2.如果使用appendChild动态添加一个li,上述方法添加的点击事件是否对新增li生效？如何让新增的li也能拥有点击事件？(如果你在问题一中回答使用for循环为所有的li添加监听事件,可爱的面试官就会拿出来这个可爱的问题)

const elUl = document.getElementById('ul')
elUl.addEventListener('click', (event) => {
  if(event.target.nodeName.toLowerCase() === 'li') {
   console.log(event.target.innerHTML)
  }
})