🥳博 主：初映CY的前说(前端领域)
🌞个人信条：想要变成得到，中间还有做到！
🤘本文核心 ：事件监听、常见事件（焦点 鼠标 输入等事件）
目录
一、事件监听是什么？
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
比如点击网页，鼠标经过...
1.1事件监听三要素
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件处理的函数：要做什么事 一般是一个匿名函数函数
1.2事件监听的两种方法：
①dom对象.on事件类型 = 事件处理函数
（不推荐这种写法）
②推荐用 注册事件.addEventListener写法
效果与第一个一样的
注意点：
- 事件类型需要用括号括起来
- 选择器需要加上类. 或者标签# 整体用货号括起来
- .addEventListener不需要加on
来个例子感受下-关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.close {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
我是广告
<div class="close">X</div>
</div>
<script>
const cl = document.querySelector('.close')
const box = document.querySelector('.box')
// 注意属性值需要 加上style，值用‘’包括起来 ‘’
cl.addEventListener('click', function () {
box.style.display = 'none'
})
</script>
</body>
</html>
二、鼠标事件
有两组为（没什么区别，后篇文章讲冒泡的时候再说）：
mouseenter鼠标经过mouseleave鼠标离开
mouseover鼠标经过mouseout鼠标离开
三、键盘事件
有两个
keydown按下
keyup抬起
四、焦点事件
有两个
focus获取焦点blur失去焦点
焦点事件长跟表单元素一起使用
五、事件对象
什么是事件对象？
- 事件对象是个对象，这个对象里保存事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就保存了鼠标点击的坐标值
// 事件对象：一般命名为event、ev、e
事件源.addEventListener('事件类型', function(事件对象) {
console.log(事件对象)
})
// 形参 e 就是事件对象
document.querySelector('.btn').addEventListener('click', function(e){
})
document.addEventListener('mousemove', function(e){
})
