有什么网站可以做外贸出口信息,网站建设兼容性,丁鹿学堂前端培训怎么样,垫江网站建设价格学习目标#xff1a; 掌握事件监听 学习内容#xff1a;
事件监听拓展阅读-事件监听版本 事件监听#xff1a; 什么是事件#xff1f; 事件是在编程时系统内发生的动作或者发生的事情。 比如用户在网页上单击一个按钮。什么是事件监听#xff1f; 就是让程序检测是否有事…学习目标 掌握事件监听 学习内容
事件监听拓展阅读-事件监听版本 事件监听 什么是事件 事件是在编程时系统内发生的动作或者发生的事情。 比如用户在网页上单击一个按钮。什么是事件监听 就是让程序检测是否有事件发生一旦有事件触发就立即调用一个函数做出响应也称为绑定事件或者注册事件。 比如鼠标经过显示下拉菜单比如点击可以播放轮播图等等。事件监听语法
元素对象.addEventListener(事件类型,要执行的函数事件监听三要素 事件源那个dom元素被事件触发了要获取dom元素。
事件类型用什么方式触发比如鼠标单击click、鼠标经过mouseover等。
事件调用的函数要做什么事。title事件监听/title
/headbodybutton按钮/buttonscript//需求点击了按钮弹出一个对话框//1.事件源 按钮 //2.事件类型 点击鼠标 click 字符串const btn document.querySelector(button)//3.事件处理程序 弹出对话框btn.addEventListener(click, function () {alert(点击了~)})/script/body注意 1.事件类型要加引号 2. 函数是点击之后再去执行每次点击都会执行一次。
练习
title练习-京东点击关闭顶部广告/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案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title练习-随机点名案例/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 truestart.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拓展阅读-事件监听版本
DOM L0
事件源.on事件 function (){}title事件监听版本/title
/headbodybutton点击/buttonscriptconst btn document.querySelector(button)btn.onclick function () {alert(11)}btn.onclick function () {alert(22)}/script/body
注意on方式会被覆盖。
DOM L2
事件源.addEventListener(事件,事件处理函数title事件监听版本/title
/headbodybutton点击/buttonscriptconst btn document.querySelector(buttonbtn.addEventListener(click, function () {alert(11)})btn.addEventListener(click, function () {alert(22)})/script/body注意addEventListener方式可绑定多次拥有事件更多特性推荐使用。
发展史
DOM L0是DOM的发展的第一个版本L:levelDOM L1DOM级别1于1998年10月1日成为 W3C推荐标准DOM L2使用addEventListener注册事件DOM L3DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件类型
