一篇文章搞懂前端事件监听

原创

虎妞先生 2023-05-10 23:12:28 ©著作权

文章标签 事件冒泡事件捕获事件监听 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者虎妞先生的原创作品，请联系作者获取转载授权，否则将追究法律责任

认识事件监听

前面我们讲到了JavaScript脚本和浏览器之间交互时，浏览器给我们提供的BOM、DOM等一些对象模型。
- 事实上还有一种需要和浏览器经常交互的事情就是事件监听:
- 浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件;
我们需要以某种方式(代码)来对其进行响应，进行一些事件的处理;
- Web当中，事件在浏览器窗口中被触发，并且通过绑定到某些元素上或者浏览器窗口本身，那么我们就可以给这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。
如何进行事件监听呢?
- 事件监听方式一:在script中直接监听;
- 事件监听方式二:通过元素的on来监听事件;
- 事件监听方式三:通过EventTarget中的addEventListener来监听;

事件监听的三种方式

function divClick() {
  console.log("div元素被点击2")
}

const divEl = document.querySelector(".box")

// DOM0
divEl.onclick = function() {
  console.log("div元素被点击3")
}

// DOM2
divEl.addEventListener("click", () => {
  console.log("div元素被点击4")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击5")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击6")
})

认识事件流的由来

事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢?
- 我们可以想到一个问题:当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身;
- 这是因为我们的HTML元素是存在父子元素叠加层级的;
- 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的;

代码演示

<body>
    <div class="box">
        <span class="span">我是span元素<span>
    </div>
</body>

document.body.addEventListener("click",()=>{
    console.log("body被点击")
})

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

divEl.addEventListener("click",()=>{
   console.log("div被点击了")
})

spanEl.addEventListener("click",()=>{
   console.log("span被点击了")
})

我们发现点击span 打印span被点击，div被点击，body被点击点击div 打印div被点击，body被点击

事件冒泡和事件捕获

我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡(Event Bubble)。
- 事实上，还有另外一种监听事件流的方式就是从外层到内层(body -> span)，这种称之为事件捕获(Event Capture);
- 为什么会产生两种不同的处理流呢?
  - 这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递;
  - IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式;
那么我们如何去监听事件捕获的过程呢?

addEventListener第三个参数默认为false,表示不捕获，可以手动传入true

document.body.addEventListener("click",()=>{
    console.log("body被点击")
},true)

冒泡和捕获的顺序

如果我们同时有事件冒泡和时间捕获的监听，那么会优先监听到事件捕获的:

代码演示

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

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)

点击spandom 输出应该是：

事件捕获:body元素被点击了

事件捕获:div元素被点击了

事件捕获:span元素被点击了

事件冒泡:span元素被点击了

事件冒泡:body元素被点击了

事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息:
- 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息;
- 那么这些信息会被封装到一个Event对象中;
该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作;
- 常见的属性:
  - type:事件的类型;
  - target:当前事件发生的元素;
  - currentTarget:当前处理事件的元素;
  - offsetX、offsetY:点击元素的位置;
- 常见的方法:
  - preventDefault:取消事件的默认行为;
  - stopPropagation:阻止事件的进一步传递;
事件类型:https://developer.mozilla.org/zh-CN/docs/Web/Events

代码演示

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

spanEl.addEventListener("click", (event) => {
  console.log("span元素被点击:", event)
  console.log("事件的类型:", event.type)
  console.log("事件的元素:", event.target, event.currentTarget)
  console.log("事件发生的位置:", event.offsetX, event.offsetY)
})

const divEl = document.querySelector(".container")
divEl.addEventListener("click", (event) => {
  console.log("div元素被点击:", event.target, event.currentTarget)
})

// 常见的方法
// preventDefault
//取消事件的默认行为 ,比如a标签就是默认跳转
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
  event.preventDefault()
})

// stopPropagation
// 组织事件进一步传递，其实就是取消冒泡
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
  event.stopPropagation()
})

点赞.webp