<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
- 新的li的内容
- 增加在ul里面
- 设置单点ul里的事件
- 输出e，寻找可以用的元
- 如果点击的元素里带li，就会触发事件
- 事件为变成红色
