网站添加音乐百度风云榜各年度小说排行榜
文章目录
- 1. 什么是事件？
- 1.1 什么是事件监听？
- 1.2 语法：
- 1.3 事件监听三要素：
- 案例:随机点名案例
- 2. 事件监听版本
- 3. 事件类型
1. 什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮.
1.1 什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
1.2 语法：
目标：能够给 DOM元素添加事件监听
1.3 事件监听三要素：
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事
注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每次点击都会执行一次
案例:随机点名案例
需求：点击开始随机抽取，点击结束输出结果
业务分析：
① 点击开始按钮随机抽取数组的一个数据，放到页面中
② 点击结束按钮删除数组当前抽取的一个数据
③ 当抽取到最后一个数据的时候，两个按钮同时禁用
核心：利用定时器快速展示，停止定时器结束展示
<!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>// 数据数组var arr = ['马超', '黄忠', '赵云', '关羽', '张飞'];function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 1. 获取元素 两个按钮 + div// 一定不要忘记加点 因为里面写css类选择器let start = document.querySelector('.start')let end = document.querySelector('.end')let qs = document.querySelector('.qs')// timer 要是全局变量let timer = 0// random 要是全局变量let random = 0// 2. 给开始按钮注册事件start.addEventListener('click', function () {// 随机抽数据--- 快速不断的抽取 间歇函数定时器timer = setInterval(function () {random = getRandom(0, arr.length - 1)//用下表表示抽到的元素qs.innerHTML = arr[random]}, 25)// 如果到了最后一个，就禁用两个按钮if (arr.length === 1) {// console.log('没了')// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})// 3. 给结束按钮注册事件 本质是停止定时器end.addEventListener('click', function () {// 停止定时器clearInterval(timer)// 删除数组元素arr.splice(random, 1)// console.log(arr)})</script>
</body></html>
2. 事件监听版本
3. 事件类型
