免费代理服务器网站,做电子书屋的网站,做自适应网站制作,嘉兴网站制作设计Web APIs 2 事件 事件监听案例#xff1a;广告关闭案例#xff1a;随机问答 事件监听版本事件类型案例#xff1a;轮播图完整焦点事件键盘事件输入事件案例#xff1a;评论字数统计 事件对象获取事件对象事件对象常用属性案例#xff1a;评论回车发布 环境对象this回调函数… Web APIs 2 事件 事件监听案例广告关闭案例随机问答 事件监听版本事件类型案例轮播图完整焦点事件键盘事件输入事件案例评论字数统计 事件对象获取事件对象事件对象常用属性案例评论回车发布 环境对象this回调函数综合案例tab栏切换全选反选案例 事件监听
什么是事件
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是事件监听
就是让程序检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单比如点击可以播放轮播图等等
语法
元素对象.addEventListener(事件类型, 要执行的函数)事件监听三要素
事件源 那个dom元素被事件触发了要获取dom元素
事件类型 用什么方式触发比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数 要做什么事 // 事件源 按钮
const btn document.querySelector(button)// 事件类型
// 事件处理程序
btn.addEventListener(click, function() {
alert(hi)
})案例广告关闭
点击关闭广告刷新之后广告又出现
bodydiv 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案例随机问答
业务: 点击开始后,随机闪现所有人的名字,点击结束,停止在一个人名,并删除这个元素. 业务分析
① 点击开始按钮随机抽取数组的一个数据放到页面中
② 点击结束按钮删除数组当前抽取的一个数据
③ 当抽取到最后一个数据的时候两个按钮同时禁用写点开始里面只剩最后一个数据不用抽了
核心 利用定时器快速展示停止定时器结束展示
bodyh2随机点名/h2div classboxspan名字是/spandiv classqs这里显示姓名/div/divdiv classbtnsbutton classstart开始/buttonbutton classend结束/button/divscript// 数据数组const arr [马超, 黄忠, 赵云, 关羽, 张飞]// 业务1 开始按钮模块// 点击开始按钮之后,通过随机数随机选取数组中的名字,并显示在网页中let timer 0const start document.querySelector(.start)const qs document.querySelector(.qs)let random 0start.addEventListener(click,function() {// 每次点击按钮都会有一个新的定时器,点击结束按钮只会关闭最后一个定时器timer setInterval(function() {random Math.floor(Math.random()*arr.length)// arr[random]qs.innerHTML arr[random]}, 50) if(arr.length 1) {start.disabled end.disabled true}})// 业务2 结束按钮模块const end document.querySelector(.end)end.addEventListener(click,function() {clearInterval(timer)arr.splice(random,1)})/script
/body
垃圾回收机制函数执行结束之后不再使用这个变量会自动删除
//这段代码不会报错因为垃圾回收机制
//html: buttonbtn/button//script
const btn document.querySelector(button)
btn.addEventListener(click,function() {const num Math.random()console.log(num)
})//这段代码不会报错因为作用域不一样
const num 10const btn document.querySelector(button)
btn.addEventListener(click,function() {const num Math.random()console.log(num)
})事件监听版本
DOM Level 0
事件源.on事件 function() { }
DOM Level 2
事件源.addEventListener(事件 事件处理函数)
区别
on方式会被覆盖addEventListener方式可绑定多次拥有事件更多特性推荐使用
发展史
DOM L0 是 DOM 的发展的第一个版本 Llevel
DOM L1DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2使用addEventListener注册事件
DOM L3 DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件类型
事件类型
事件监听三要素事件源、事件类型、事件调用的函数 //html
//div/div//css
div {width:200px;height:200px;background-color:pink;
}//javascript
const div document.querySelector(div)
//鼠标经过
div.addEventListener(mouseenter,function() {console.log(轻轻的我来了)
})
//鼠标离开
div.addEventListener(mouseleave,function() {console.log(轻轻的我走了)
})案例轮播图完整
需求当点击左右的按钮可以切换轮播图
分析
①右侧按钮点击变量如果大于等于8则复原0
②左侧按钮点击变量–如果小于0则复原最后一张
③鼠标经过暂停定时器
④鼠标离开开启定时器
业务分析左侧按钮、右侧按钮、鼠标经过、自动播放
焦点事件
bodyinput typetext
/body
scriptconst input document.querySelector(text)input.addEventListener(focus,function() {console.log(haha);})
/script小米搜索框案例
需求当表单得到焦点显示下拉菜单失去焦点隐藏下来菜单
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;display: 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;}.mi .search {border: 1px solid #ff6700;}.result-list {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/headbodydiv 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//属性选择器const input document.querySelector([typesearch])const ul document.querySelector(.result-list)input.addEventListener(focus, function() {ul.style.display blockinput.classList.add(search)})input.addEventListener(blur, function() {ul.style.display noneinput.classList.remove(search)})/script
/body/html键盘事件
input typetext
script
const input document.querySelector(input)input.addEventListener(keydown, function() {console.log(键盘按下了)
})input.addEventListener(keyup, function() {console.log(键盘抬起了)
})
/script输入事件
得到用户输入的内容通过input.value
input typetext
script
const input document.querySelector(input)input.addEventListener(input, function() {console.log(1111111111) //输入内容console.log(input.value)
})
/script案例评论字数统计
需求用户输入文字可以计算用户输入的字数
分析
①判断用输入事件 input
②不断取得文本框里面的字符长度, 文本域.value.length
③把获得数字给下面文本框 代码 看下文的评论回车发布 focus伪类选择器获得焦点
注不使用 JS使用 CSS 也可以实现
bodyinput typetext
/body
styleinput {width: 200px;}input:focus {/* 获得光标 */width: 300px;}
/style事件对象
获取事件对象事件对象常用属性
事件对象是什么
也是个对象属性 方法这个对象里有事件触发时的相关信息
例如鼠标点击事件中事件对象就存了鼠标点在哪个位置等信息
使用场景
可以判断用户按下哪个键比如按下回车键可以发布新闻按下空格键就不能发
可以判断鼠标点击了哪个元素从而做相应的操作
事件对象在哪里
在事件绑定的回调函数的第一个参数就是事件对象
获取事件对象
语法 在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e
元素.addEventListener(click, function(e) {
// 这里的e就是事件对象
})例如
// button/button
const btn document.querySelector(btn)
btn.addEventListener(click, function() {console.log(e);
})事件对象常用属性
部分常用属性 type 获取当前的事件类型 clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置 key 用户按下的键盘键的值。现在不提倡使用keyCode 已经废除
body!-- 回车键触发案例 --input typetext
/body
scriptconst btn document.querySelector(button)btn.addEventListener(click, function(e) {console.log(e);})const input document.querySelector(input)input.addEventListener(keyup,function(e) {// console.log(e.key);if(e.key Enter) {console.log(我按下了回车键);}})
/script案例评论回车发布
需求按下回车键盘可以发布信息
分析
①用到按下键盘事件 keydown 或者 keyup 都可以
②如果用户按下的是回车键盘则发布信息
③让留言信息模块显示把拿到的数据渲染到对应标签内部
补一个trim方法
只清除左右的空格 const str pink console.log(str) // pink console(str.trim()) // pink代码 bodydiv classwrapperi classavatar/itextarea idtx placeholder发一条友善的评论 rows2 maxlength200/textareabutton发布/button/divdiv classwrapperspan classtotal0/200字/span/divdiv classlistdiv classitem styledisplay: none;i classavatar/idiv classinfop classname清风徐来/pp classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp classtime2022-10-10 20:29:21/p/div/div/div
/bodyscript//文本域获得焦点让total显示出来const tx document.querySelector(#tx)const total document.querySelector(.total)tx.addEventListener(focus, function() {total.style.opacity 1})tx.addEventListener(blur, function() {total.style.opacity 0})//检测用户输入tx.addEventListener(input, function() {total.innerHTML ${tx.value.length}/200字})//按下回车发布评论const item document.querySelector(.item)const text document.querySelector(.text)tx.addEventListener(keyup, function(e) {if(e.key Enter) {if(tx.value.trim() ! ) {text.innerHTML tx.valueitem.style.display block}tx.value //清空文本域//按下回车之后 字符统计复原total.innerHTML 0/200字}})/script环境对象this
环境对象 指的是函数内部特殊的变量 this 它代表着当前函数运行时所处的环境
作用 弄清楚this的指向可以让我们代码更简洁
函数的调用方式不同this 指代的对象也不同
【谁调用 this 就是谁】 是判断 this 指向的粗略规则
直接调用函数其实相当于是 window.函数所以 this 指代 window //每一个函数里面都有thisfunction fn() {console.log(this); }fn() // 相当于是 window.fn()所以 this 指代 windowconst btn document.querySelector(button)btn.addEventListener(click, function() {console.log(this); //指向button})回调函数
如果将函数 A 做为参数传递给函数 B 时我们称函数 A 为回调函数
简单理解 当一个函数当做参数来传递给另外一个函数的时候这个函数就是回调函数 过了一秒钟回头调用函数 fn
每click一次调用一次函数
综合案例
tab栏切换
选项卡切换
全选反选案例
用户点击大全选所有的复选框全部选择
用户取消大全选则所有复选框取消
用户选了所有的复选框之后大全选自动选择
