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)
  }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容