js之事件监听以及相关案例
这里写目录标题
- 一级目录
- 二级目录
- 三级目录
- Web APIs02
- 一、事件监听
- 1.定义
- 2.调用语法
- 3.事件监听三要素
- 4.事件监听版本
- 二、事件类型
- 随机点名之事件监听版本
- 案例要求
- 大致思路
- 先获取dom对象
- 理解程序运行
- 完整代码
一级目录
二级目录
三级目录
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=0let timer=0const 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>