事件监听
- 目标：能够给 DOM元素添加事件监听
什么是事件？
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击一个按钮
什么是事件监听？
- 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
- 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
事件监听
- 语法：
元素对象.addEventListener('事件类型',要执行的函数)
事件监听案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>来打我呀</p>
<script>
// 1.获取DOM对象
const p1 = document.querySelector('p')
// 2.事件监听
// 对象.addEventListener('事件',匿名函数要处理的事件)
p1.addEventListener('click',function(){
// 要处理的事件
alert('被电啦')
})
</script>
</body>
</html>事件监听三要素：
- Ø 事件源： 那个dom元素被事件触发了，要获取dom元素
- Ø 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- Ø 事件调用的函数： 要做什么事
事件监听版本
- DOM L0 事件源.on事件 = function() { }
- DOM L2 事件源.addEventListener(事件， 事件处理函数)
- 区别： on方式会被覆盖，
addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件类型
鼠标事件（鼠标触发）
- click：鼠标点击
- mouseenter：鼠标经过
- mouseleave：鼠标离开
焦点事件（表单获得光标）
- focus：获得焦点
- blur：失去焦点
键盘事件（键盘触发）
- Keydown：键盘按下触发
- Keyup：键盘抬起触发
文本事件（表单输入触发）
-input：用户输入事件
随机点名案例（利用定时器）
<!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 = ['tt','yy','uu','ii','oo','hh','jj','mm']
// 得到随机名字
// console.log(arr[random]);
let times=''
let random =''
// 获取DOM对象
const qs1 = document.querySelector('.qs')// 名字
const end1 = document.querySelector('.end')
// 开始按钮
const start1 = document.querySelector('.start')
// 事件监听 当点击开始按钮，随机生成数组里的名字
start1.addEventListener('click',function(){
// 定时函数
times= setInterval(function(){
// 获取随机数
random = Math.floor(Math.random() *arr.length)
qs1.innerHTML=arr[random]
},100)
if(arr.length ===1){
start1.disabled=end1.disabled=true
}
})
// 结束
end1.addEventListener('click',function(){
clearInterval(times)
// 删除获取到的数组元素
arr.splice(random,1)
console.log(arr);
})
</script>
</body>
</html>