网站续费贵是重新做个好还是续费,页面跳转页面紧急通知,做直播导航网站有哪些,给网站做备案DOM-事件基础
一.事件
1.事件
目标#xff1a;能够给 DOM元素添加事件监听
事件:事件是在编程时系统内发生的动作或者发生的事情#xff0c;比如用户在网页上单击一个按钮
事件监听:就是让程序检测是否有事件产生#xff0c;一旦有事件触发#xff0c;就立即调用一个函…DOM-事件基础
一.事件
1.事件
目标能够给 DOM元素添加事件监听
事件:事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮
事件监听:就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为 注册事件
语法:
事件监听三要素:
事件源 那个dom元素被事件触发了要获取dom元素事件 用什么方式触发比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数 要做什么事
举例说明:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件监听/title
/head
bodybutton点击我/buttonscript//1.获取按钮元素let btn document.querySelector(button)//2.事件监听 绑定事件 注册事件 事件侦听// 事件源.addEventListener(事件,事件处理函数)btn.addEventListener(click,function(){alert(月薪过万)})/script
/body
/html
案例淘宝点击关闭二维码 需求点击关闭之后淘宝二维码关闭 案例 分析 ①点击的是关闭按钮 ②关闭的是父盒子 核心利用样式的显示和隐藏完成 display:none 隐藏元素 display:block 显示元素 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}/style
/headbodydiv classerweimaimg src./images/code.png alti classclose_btnx/i/divscript//1.获取元素 事件源i 关闭的二维码erweimalet close_btn document.querySelector(.close_btn)let erweima document.querySelector(.erweima)//2.事件监听close_btn .addEventListener(click,function(){//erweima 关闭 他是隐蔽的erweima.style.display none})/script
/body/html
案例随机点名
需求点击按钮之后随机显示一个名字如果没有显示则禁用按钮 案例 分析 ①点击的是按钮 ②随机抽取一个名字 ③ 当名字抽取完毕则利用 disabled 设置为 true
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}/style
/head
bodydiv开始抽奖吧/divbutton点击点名/buttonscript//1.获取元素 div 和 buttonlet box document.querySelector(div)let btn document.querySelector(button)//2.随机函数function getRandom(min,max){return Math.floor(Math.random()*(max - min 1)) min} //声明一个数组let arr [赵云,黄忠,关羽,张飞,马超,刘备,曹操,pink老师]//3.事件监听btn.addEventListener(click,function(){//随机的数字let random getRandom(0,arr.length - 1)console.log(arr[random])box.innerHTML arr[random]//删除数组里面的元素 splice(从那里删删几个)arr.splice(random,1)//如果数组里面剩下最后一个就要禁用按钮if (arr.length 1){// console.log(最后一个)btn.disabled truebtn.innerHTML 已经抽完}})/script
/body
/html
