一篇文章搞懂前端事件监听
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
认识事件监听
- 前面我们讲到了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元素被点击了
事件冒泡: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()
})最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录