实木复合门网站建设价格,擼擼擼做最好的导航网站,建设网站培训学校,wordpress小图标网站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
随机点名案例
需求点击开始随机抽取点击结束输出结果 业务分析 ① 点击开始按钮随机抽取数组的一个数据放到页面中 ② 点击结束按钮删除数组当前抽取的一个数据 ③ 当抽取到最后一个数据的时候两个按钮同时禁用 核心利用定时器快速展示停止定时器结束展示 !DOCTYPE html
html langen
headmeta 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 button{text-align: center;}.btns button{width: 120px;height: 35px;margin: 0 50px;}/style
/head
bodyh2随机点名/h2div classboxspan名字是:/spandiv classqs这里显示姓名/div/divdiv classbtnsbutton classstart开始/buttonbutton classend结束/button/divscript//数据数组let arr [马超,黄忠,赵云,关羽,张飞]function getRandom(min,max){return Math.floor(Math.random() * (max - min 1)) min}//1.获取元素 两个按钮 divlet start document.querySelector(.start)let end document.querySelector(.end)let qs document.querySelector(.qs)//timer 要是全局变量let timer 0//2.给开始按钮注册事件start.addEventListener(click,function(){//随机抽数据---快速不断的抽取 间歇函数定时器timer setInterval(function(){let random getRandom(0,arr.length-1)qs.innerHTML arr[random]},25)})//3.给结束按钮注册事件 本质是停止定时器end.addEventListener(click,function(){//停止定时器clearInterval(timer)})/script
/body
/html
2.拓展阅读-事件监听版本
DOM L0
事件源.on事件 function() { }
DOM L2
事件源.addEventListener(事件 事件处理函数)
发展史
DOM L0 是 DOM 的发展的第一个版本 LlevelDOM L1DOM级别1 于1998年10月1日成为W3C推荐标准DOM L2使用addEventListener注册事件DOM L3 DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件类型
3.事件类型
鼠标事件鼠标触发
click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开
焦点事件表单获得光标
focus 获得焦点 blur 失去焦点
键盘事件键盘触发
Keydown 键盘按下触发 Keyup 键盘抬起触
文本事件表单输入触发
input 用户输入事件
案例一 小米搜索框案例 需求当表单得到焦点显示下拉菜单失去焦点隐藏下来菜单 案例 分析 ①开始下拉菜单要进行隐藏 ②表单获得焦点 focus则显示下拉菜单并且文本框变色添加类 ③表单失去焦点反向操作
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title小米搜索框/titlestyle*{margin: 0;padding: 0;box-sizing: border-box;}ul{list-style: none;}.mi{position: relative;width: 223px;margin: 100px auto;}.mi input{width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all .3s;}.mi .search{border: 1px solid #ff6700;}.result-list{display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a{display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover{background-color: #eee;}/style
/head
bodydiv classmiinput typesearch placeholder小米笔记本ul classresult-listlia href#全部商品/a/lilia href#小米11/a/lilia href#小米10S/a/lilia href#小米笔记本/a/lilia href#小米手机/a/lilia href#黑鲨4/a/lilia href#空调/a/li/ul/divscript//1.获取元素 inputlet search document.querySelector(input[typesearch])let list document.querySelector(.result-list)//2.事件监听 获得光标事件 focussearch.addEventListener(mouseenter,function(){//显示下拉菜单list.style.display block//文本框变色search.classList.add(search)})//3.事件监听 失去光标事件 blursearch.addEventListener(blur,function(){//隐藏下拉菜单list.style.display none//文本框去色search.classList.remove(search)})/script
/body
/html
案例二
微博输入案例 需求用户输入文字可以计算用户输入的字数 案例 分析 ①判断用输入事件 input ②不断取得文本框里面的字符长度 ③把获得数字给下面文本框
css:
* {margin: 0;padding: 0;
}
ul {list-style: none;
}
.w {width: 900px;margin:0 auto;
}
.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline:none;padding-left: 20px;padding-top:10px;font-size: 18px;
}
.controls {overflow: hidden;
}.controls div {float: right;
}
.controls div span {color:#666;
}
.controls div .useCount {color:red;
}
.controls div button {width: 100px;outline: none;border:none;background: rgb(0, 132, 255);height: 30px;cursor: pointer;color:#fff;font:bold 14px 宋体;transition: all 0.5s;
}
.controls div button:hover {background: rgb(0, 225, 255);
}
.controls div button:disabled {background: rgba(0, 225, 255,0.5);
}
.contentList {margin-top:50px;
}
.contentList li {padding: 20px 0;border-bottom: 1px dashed #ccc;
}
.contentList li .info {position: relative;
}
.contentList li .info span {position: absolute;top:15px;left:100px;font:bold 16px 宋体;
}
.contentList li .info p {position: absolute;top:40px;left: 100px;color:#aaa;font-size: 12px;
}
.contentList img {width: 80px;border-radius: 50%;
}
.contentList li .content {padding-left: 100px;color: #666;word-break: break-all;
} weibo模板.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/weibo.css
/headbodydiv classwdiv classcontrolsimg srcimages/tip.png altbrtextarea placeholder说点什么吧... idarea cols30 rows10 maxlength200/textareadivspan classuseCount0/spanspan//spanspan200/spanbutton idsend发布/button/div/divdiv classcontentListul/ul/div/divscript//1.获取元素 文本域 countlet area document.querySelector(#area)let useCount document.querySelector(.useCount)//2.绑定事件 用户输入事件 inputarea.addEventListener(input,function(){//console.log(测试中)//不断得到文本域里面的字符长度//area.value 可以得到的值// console.log(area.value)//area.value.length 得到输入字符长度// console.log(area.value.length)useCount.innerHTML area.value.length})/script
/body/html
