<script>
//获取父元素
let ul = document.querySelector('ul')
//获取按钮
let button = document.querySelector('button')
//绑定按钮单点事件
button.addEventListener('click', function () {
//增加新的li
let newli = document.createElement('li')
//新的li的内容
newli.innerText = '我是新来的'
//增加在ul里面
ul.appendChild(newli)
})
//设置单点ul里的事件
ul.addEventListener('click', function (e) {
//输出e,寻找可以用的元素
console.log(e);
//如果点击的元素里带li,就会触发事件
if (e.target.localName == 'li') {
//事件为变成红色
e.target.style.color = 'red'
}
})
</script>
事件委托案例讲解:
首先获取父元素和按钮,然后添加绑定按钮的添加事件,然后增加新的li,以及里面的内容,把他放在ul里面,然后再设置单点ul事件会触发输出再做一个判断即可,判断是否点击,如点击就会输出样式变成红色。