登陆中国建设银行网站我的账户密码怎么就有了?怎么清除,网上申报系统入口,wordpress3.5.2下载,翻译建设网站1、事件监听
什么是事件#xff1f;
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是事件监听#xff1f;
就是让程序检测是否有事件产生#xff0c;一旦有事件触发#xff0c;就立即调用一个函数做出响应#xff0c;也称为绑定事…1、事件监听
什么是事件
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是事件监听
就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单比如点击可以播放轮播图等等。
1.1 基本语法 元素对象.addEventListener(事件类型,要执行的函数) 事件监听三要素
事件源那个dom元素被事件触发了要获取dom元素事件类型用什么方式触发比如鼠标单击click、鼠标经过mouseover等事件调用的函数要做什么事
bodybutton点击/buttonscript// 需求点击了按钮弹出一个对话框// 1. 事件源 按钮const btn document.querySelector(button)btn.addEventListener(click,function(){alert(今天吃什么)})// 2. 事件类型 点击鼠标// 3. 事件处理程序 弹出对话框/script
/body
1.1.1 事件类型 鼠标经过与鼠标离开 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: blue;}/style
/head
bodydiv/divscriptconst div document.querySelector(div)// 鼠标经过div.addEventListener(mouseenter,function(){console.log(我到了)})// 鼠标离开div.addEventListener(mouseleave,function(){console.log(我走了)})/script
/body
/html
1.2 练习 京东点击关闭顶部广告 需求点击关闭之后顶部关闭 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}/style
/headbodydiv classbox我是广告div classbox1X/div/divscript// 1. 获取事件源const box1 document.querySelector(.box1)// 关闭的是大盒子const box document.querySelector(.box)// 2. 事件侦听box1.addEventListener(click, function () {box.style.display none})/script
/body/html
2、拓展阅读-事件监听版本
2.1 事件监听版本 DOM L0 事件源.on事件 function(){} DOM L2 事件源.addEventListener(事件,事件处理函数) 区别on方式会被覆盖addEventListener方式可以多次绑定拥有事件更多特性 发展史
DOM L0是DOM的发展的第一个版本 LlevelDOM L1DOM级别1于1998年10月1日成为W3C推荐标准DOM L2使用addEventListener注册事件DOM L3DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件类型
3、随机点名案例 分析 点击开始按钮随机抽取数组的一个数据放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候两个按钮同时禁用写点开始里面只剩最后一个数据不用抽了 核心利用定时器快速展示停止定时器结束展示 !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// 数据数组const arr [马超, 黄忠, 赵云, 关羽, 张飞]// 定时器的全局变量let timerId 0// 随机号要全局变量let random 0// 业务1. 开始按钮模块const qs document.querySelector(.qs)// 1.1 获取开始按钮对象const start document.querySelector(.start)// 1.2 添加点击事件start.addEventListener(click,function(){timerId setInterval(function(){// 随机数random parseInt(Math.random() * arr.length)// console.log(arr[random]);qs.innerHTML arr[random]},35)// 如果数组里面只有一个值了就不需要抽取了让两个按钮禁用就可以了if(arr.length 1){// start.disabled true// end.disabled truestrat.disabled end.disabled true}})// 2. 关闭按钮模块const end document.querySelector(.end)end.addEventListener(click,function(){clearInterval(timerId)// 结束了可以删除掉当前抽取的那个数组元素arr.splice(random,1)console.log(arr);})/script
/body/html
