这里写目录标题
一级目录
二级目录
三级目录
Web APIs02
一、事件监听
1.定义
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
2.调用语法
元素对象.addEventListener(‘事件类型’，要执行的函数)
3.事件监听三要素
事件源(元素对象)：那个dom元素被事件触发了，首先要获取dom元素
事件类型：用什么方式触发，比如鼠标单击cick、鼠标经过mouseover等
事件调用的函数：要做什么事
4.事件监听版本
DOM LO
事件源.on事件=function(){}
DOM L2
事件源.addEventListener(事件，事件处理函数)
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
二、事件类型
鼠标事件：鼠标触发
click鼠标点击，mouseenter鼠标经过，mouseleave鼠标离开
焦点事件：表单获得光标
focus获得焦点，blur失去焦点
键盘事件：键盘触发
Keydown键盘按下触发，Keyup键盘抬起触发
文本事件：表单输入触发
input用户输入事件
js自动调用点击事件 click():
例如：自动播放模块
setInterval(function(){
next.click()//next为右箭头的对象
},1000)
随机点名之事件监听版本
案例要求
不断点击开始结束从已定数组中抽取人，已被抽取的人要从原定数组中去除，直至数组中只剩最后一个人，禁用按钮，停止抽取
大致思路
先获取dom对象
需要开始、结束按钮和更改人名的盒子
理解程序运行
鼠标点击的事件类型触发事件监听，事件源为“开始”按钮，触发函数为每隔0.1秒更换一个人名，利用定时器函数，不断更改uname的人名，同理，当我们点击“结束”按钮时，关闭定时器，并且将此人名从数组中移除
注意，当数组长度为1时，禁用开始和结束按钮，由于两次事件监听都需要定时器函数，所以设置定时器函数为全局变量，随机数同理
完整代码
<!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>
.big {
margin:100px auto;
width: 300px;
height: 500px;
}
.start,
.end {
width: 100px;
height: 50px;
}
.uname {
/* background-color: pink; */
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="big">
<div class="box">
<div>这次会是谁呢</div>
<div class="uname">ddd</div>
</div>
<div class="btn">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
</div>
<script>
const arr=['a','b','c','d','e','f']
let random=0
let timer=0
const uname=document.querySelector('.uname')
const start=document.querySelector('.start')
start.addEventListener('click',function(){
timer=setInterval(function(){
random=Math.floor(Math.random()*arr.length)
uname.innerHTML=arr[random]
},100)
if(arr.length===1){
start.disabled=end.disabled=true
}
})
const end = document.querySelector('.end')
end.addEventListener('click',function(){
clearInterval(timer)
arr.splice(random,1)
})
</script>
</body>
</html>