事件委托:给父节点绑定事件,根据点击的子节点执行相应的代码
注意事项:事件冒泡过程会损耗性能,嵌套结构越深损耗越大,所以并非把事件委托给越高层的父节点就越好
<ul id="clickUl">
<li id="1" data-name='one'>1</li>
<li id="2" data-name='two'>2</li>
<li id="3" data-name='three'>3</li>
</ul>
let ul = document.getElementById('clickUl')
ul.addEventListener('click',(e)=>{
let id = e.target.id // 获取点击的对象id
let data = e.target.dataset.name // 获取点击的对象data-name属性
switch (data){
case 'one':
console.log('I am one')
break;
case 'two':
console.log('I am two')
break;
default:
console.log('I am default')
}
})