什么是事件委托？

MDN上這么說
事件委托：這個(gè)概念依賴于這樣一個(gè)事實(shí),如果你想要在大量子元素中單擊任何一個(gè)都可以運(yùn)行一段代碼，您可以將事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上，并將事件監(jiān)聽器氣泡的影響設(shè)置為每個(gè)子節(jié)點(diǎn)，而不是每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器。

題目：

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

問題:

1.如何為ul中的li添加點(diǎn)擊事件？

const elLis = Array.from(document.getElementsByTagName('li'))
// 使用Array的from方法可以使dom的偽數(shù)組對象轉(zhuǎn)為數(shù)組，這樣就可以愉快的使用forEach了 順便也能在面試官面前裝個(gè)*
elLis.forEach(elLi => {
  elLi.addEventListener('click', (event) => {
    console.log(event.target.innerHTML)
  })
})

2.如果使用appendChild動態(tài)添加一個(gè)li,上述方法添加的點(diǎn)擊事件是否對新增li生效？如何讓新增的li也能擁有點(diǎn)擊事件？(如果你在問題一中回答使用for循環(huán)為所有的li添加監(jiān)聽事件,可愛的面試官就會拿出來這個(gè)可愛的問題)

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