鼠标跟随案例 clientX和clientY 相对于浏览器可视窗口左上角的坐标，不包含导航栏和地址栏
<script>
//获取元素
let img = document.querySelector('img')
//绑定跟随鼠标事件
document.addEventListener('mousemove', function (e) {
//查看跟随的数据是否输出成功
console.log(e.clientX, e.clientY)
//调整图片的位置
img.style.left = e.clientX - img.offsetWidth / 2 + 'px'
img.style.top = e.clientY - img.offsetWidth / 2 + 'px'
})
</script>
事件委托 给父元素绑定事件，使子元素也能触发事件，必须是父子级元素相同的事件类型
<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>
