🥳博 主:初映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){
})