什么是事件委托?
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)
}
})