当前位置：首页 > news >正文

Web APIs知识点讲解(阶段二)

news 2025/11/14 20:51:01

DOM-事件基础

一.事件

1.事件

目标：能够给 DOM元素添加事件监听

事件:事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮

事件监听:就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法:

事件监听三要素:

事件源：那个dom元素被事件触发了，要获取dom元素
事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

举例说明:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听</title>
</head>
<body><button>点击我</button><script>//1.获取按钮元素let btn = document.querySelector('button')//2.事件监听  绑定事件 注册事件  事件侦听// 事件源.addEventListener('事件',事件处理函数)btn.addEventListener('click',function(){alert('月薪过万')})</script>
</body>
</html>

案例：淘宝点击关闭二维码

需求：点击关闭之后，淘宝二维码关闭案例分析： ①：点击的是关闭按钮 ②：关闭的是父盒子核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {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>
</head><body><div class="erweima"><img src="./images/code.png" alt=""><i class="close_btn">x</i></div><script>//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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head>
<body><div>开始抽奖吧</div><button>点击点名</button><script>//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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{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>
<body><h2>随机点名</h2><div class="box"><span>名字是:</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>//数据数组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 的发展的第一个版本； L：level
DOM L1：DOM级别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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米搜索框</title><style>*{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>
<body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>//1.获取元素 inputlet search = document.querySelector('input[type=search]')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 lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/weibo.css">
</head><body><div class="w"><div class="controls"><img src="images/tip.png" alt=""><br><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div><script>//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>

Web APIs知识点讲解(阶段二)

一.事件

1.事件

2.拓展阅读-事件监听版本

3.事件类型

案例一：

案例二：

相关文章：

Web APIs知识点讲解(阶段二)

多平台拼音输入法软件的开发

Flutter学习7 - Dart 泛型

Git 基本操作⼯作区、暂存区、版本库

利用Vue3的新API(customRef)实现防抖效果

【Linux】在 Ubuntu 系统下使用 Screen 运行 Python 脚本

jxls——自定义命令设置动态行高

前端面试练习24.3.2-3.3

优先级队列（Java ）

大宋咨询如何进行汽车门店6S标准现场检查

仿牛客网项目---点赞模块的实现

【AI视野·今日CV 计算机视觉论文速览第300期】Fri, 1 Mar 2024

【单片机学习的准备】

力扣hot100：438.找到字符串中所有字母异位词

Kali Linux 2024.1

springboot启动加载

基于Java的智能停车场管理系统(Vue.js+SpringBoot)

ESD Clamp cell是什么？

费率电能表

2张图2秒钟3D重建！这款AI工具火爆GitHub，网友：忘掉Sora

ubuntu搭建nfs服务centos挂载访问

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

【网络安全产品大调研系列】2. 体验漏洞扫描

质量体系的重要

postgresql|数据库|只读用户的创建和删除（备忘）

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

12.找到字符串中所有字母异位词

#Uniapp篇：chrome调试unapp适配

【Go语言基础【13】】函数、闭包、方法

Mysql8 忘记密码重置，以及问题解决