事件
什么是事件呢?事件是一种行为或者状态,一旦发生了改变,就会调用一个函数.比如,用户点击网页中的一个按钮,弹出了一个对话框,这就是点击事件.
- 事件监听 当为DOM对象添加事件监听之后,当事件触发时就会调用一个函数.事件监听的方法是addEvenListener(事件类型,事件回调).事件监听三要素:
- 事件源: 一个dom元素被事件触发了,要获取dom元素
- 事件类型: 什么方式触发的,是鼠标单击还是双击
- 事件调用回调函数: 要做什么事情
<body>
<div>123</div>
<input type="button">
<script>
//先获取元素
const div = document.querySelector('div')
// 然后添加点击事件,等待用户触发双击,控制台打印123就会被执行.
div.addEventListener('dblclick', function () {
console.log(123);
})
</script>
</body>
demo:很多网站上都有小广告弹窗,点击小广告的叉叉关掉小广告弹窗,叉叉就是事件源,事件类型是点击,要做的事情就是关掉了广告.
<body>
<div class="box1">
<div class="box2">X</div>
</div>
<script>
//获取两个盒子元素
const box1 = document.querySelector('.box1')
const box2 = document.querySelector('.box2')
//触发点击事件
box2.addEventListener('click', function () {
//执行回调函数
box1.style.display = 'none'
})
</script>
</body>
- 事件类型 常见的事件类型
- 鼠标事件
- click 鼠标点击
- mouseenter 鼠标经过
- mouseleave 鼠标离开
- 焦点事件(表单获得光标)
- focus 获得焦点
- blur 失去焦点
- 键盘事件
- keydown 键盘按下触发
- keyup 键盘抬起触发
- 文本事件(表单输入触发)
- input 用户输入事件
demo:当表单得到焦点,显示下拉菜单,鼠标离开表单隐藏下拉菜单
<body>
<div class="mi">
<input type="search" placeholder="掘金周边商品">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">金矿1</a></li>
<li><a href="#">金矿2</a></li>
<li><a href="#">金矿3</a></li>
<li><a href="#">金矿4</a></li>
<li><a href="#">金矿5</a></li>
<li><a href="#">金矿6</a></li>
</ul>
</div>
<script>
//获取元素
const inp = document.querySelector('input')
const ul = document.querySelector('ul')
const mi = document.querySelector('.mi')
//给表单添加焦点事件
inp.addEventListener('focus', function () {
//显示下拉菜单
ul.style.display = 'block'
inp.classList.add('search')
})
//添加鼠标离开事件
mi.addEventListener('mouseleave', function () {
//离开收起下拉菜单
ul.style.display = 'none'
inp.classList.remove('search')
})
</script>
</body>
事件对象
任何事件类型被触发时都会产生与事件相关的信息以对象的形式记录下来,那么这个对象就叫做事件对象.通常事件回调函数的'第一个参数'叫做事件对象,习惯性命名为event,ev,e.以一个键盘事件为例
<body>
<script>
document.addEventListener('keydown', function (e) {
console.log(e);
console.log(e.key);
})
</script>
</body>
控制台打印出来的e是一个对象.e对象里面有一个属性key,属性值为'F12',就是键盘按下时的键值.
随机点名
先看一下完整版的,再说一下需要注意的细节问题
- 点击开始按钮随机抽取数组的一个数据,放到页面中
- 点击结束按钮删除数组当前抽取的数据
- 当抽取到最后一位数据后禁用两个按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
const arr = ['法外狂徒张三', '李四', '王五', '赵六', '钱七']
//获取元素
const qs = document.querySelector('.qs')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
//随机数组下标和定时器定义为全局变量
let random;
let timer;
//开始按钮
start.addEventListener('click', function () {
clearInterval(timer)
//随机抽取定时器
timer = setInterval(function () {
random = parseInt(Math.random() * arr.length)
qs.innerHTML = arr[random]
}, 50)
})
//结束按钮
end.addEventListener('click', function () {
//清除定时器
clearInterval(timer)
//获取到的名字删除
arr.splice(random, 1)
//console.log(arr);
//当数组长度为1时禁用两个按钮
if (arr.length === 1) {
start.disabled = end.disabled = true
}
})
</script>
</body>
</html>
注意:
- 随机下标和定时器得定义为全局变量,不然局部变量其他函数里面会报错.
- 在开始按钮里定时器开启之前得清除一次定时器.否则会有bug.如果一直点击开始按钮,那么会一直生成新的定时器,随机的速度会越来越快.按结束按钮也不会停止.下面看一下有没有清除定时器时的bug,为了体现直观效果,把定时器事件放慢.
start.addEventListener('click', function () {
清除定时器注释
// clearInterval(timer)
timer = setInterval(function () {
random = parseInt(Math.random() * arr.length)
qs.innerHTML = arr[random]
}, 500)//间隔时间调整为500ms
})
