事件冒泡和事件捕获

我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）。

事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；

为什么会产生两种不同的处理流呢？

这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事

件流来对事件进行了传递；

IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；

那么我们如何去监听事件捕获的过程呢？

const spanEl = document.querySelector(".span")
const divEl = document.querySelector(".container")

spanEl.addEventListener("click", () => {
  console.log("事件冒泡:span元素被点击了")
})

divEl.addEventListener("click", () => {
  console.log("事件冒泡:div元素被点击了")
})

document.body.addEventListener("click", () => {
  console.log("事件冒泡:body元素被点击了")
})

// 再次监听
spanEl.addEventListener("click", (event) => {
  console.log("事件捕获:span元素被点击了")
  event.stopPropagation()
}, true)

divEl.addEventListener("click", () => {
  console.log("事件捕获:div元素被点击了")
}, true)

document.body.addEventListener("click", (event) => {
  console.log("事件捕获:body元素被点击了")
}, true)

事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息：

比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；

那么这些信息会被封装到一个Event对象中；

该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；

常见的属性：

type：事件的类型；

target：当前事件发生的元素；

currentTarget：当前处理事件的元素；

offsetX、offsetY：点击元素的位置；

常见的方法：

preventDefault：取消事件的默认行为；

stopPropagation：阻止事件的进一步传递；

事件类型：developer.mozilla.org/zh-CN/docs/…

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情