案例:获取鼠标的坐标
const box1 = document.getElementById("box1")// 下面两种方式都可以拿到事件对象
// box1.onmousemove = event => {
// console.log(event)
// }box1.addEventListener("mousemove", event => {console.log(event.clientX, event.clientY)box1.textContent = event.clientX + "," + event.clientY
})
Event - Web API 接口参考
案例:阻止事件冒泡

Document
案例:取消超链接的默认跳转行为
const link = document.querySelector("a")link.addEventListener("click", (event) => {event.preventDefault() // 取消默认行为alert("被点了~~~")})
event.stopPropagation()案例:图标跟随鼠标
Title
案例:在一片区域中图标不跟随鼠标(使用阻止冒泡事件实现效果)
Title
委派就是将本该绑定给多个元素的事件,统一绑定给父级元素,这样可以降低代码复杂度方便维护
案例:点击li标签,打印出其中的内容
思路:原来是通过在每一个li上都绑定一个点击事件,然后对新加的li也再添加事件,但是现在可以使用事件的委派来实现这个操作,也就是直接绑定在父级元素上
Title
- 链接1
- 链接2
- 链接3
- 链接4
事件的传播机制
通过
event.eventPhase可以获得事件触发的阶段1 捕获阶段 2 目标阶段 3 冒泡阶段
stopPropagation()可以停止捕获或者冒泡,在执行到的函数停止
Document