基于php网站开发步骤,app软件免费模板下载网站,唐山网站建设技术外包,app制作开发公司前十名文章目录 1. 什么是事件#xff1f;1.1 什么是事件监听#xff1f;1.2 语法#xff1a;1.3 事件监听三要素#xff1a;案例:随机点名案例 2. 事件监听版本3. 事件类型 1. 什么是事件#xff1f;
事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按… 文章目录 1. 什么是事件1.1 什么是事件监听1.2 语法1.3 事件监听三要素案例:随机点名案例 2. 事件监听版本3. 事件类型 1. 什么是事件
事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮.
1.1 什么是事件监听
就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为 注册事件
1.2 语法
目标能够给 DOM元素添加事件监听
1.3 事件监听三要素
事件源 那个dom元素被事件触发了要获取dom元素事件 用什么方式触发比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数 要做什么事 注意
事件类型要加引号函数是点击之后再去执行每次点击都会执行一次
案例:随机点名案例
需求点击开始随机抽取点击结束输出结果 业务分析 ① 点击开始按钮随机抽取数组的一个数据放到页面中 ② 点击结束按钮删除数组当前抽取的一个数据 ③ 当抽取到最后一个数据的时候两个按钮同时禁用 核心利用定时器快速展示停止定时器结束展示 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodyh2随机点名/h2div classboxspan名字是:/spandiv classqs这里显示姓名/div/divdiv classbtnsbutton classstart开始/buttonbutton classend结束/button/divscript// 数据数组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/html2. 事件监听版本 3. 事件类型
