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

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

news 2026/2/9 16:27:00

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知识点讲解(阶段二)

DOM-事件基础 一.事件 1.事件 目标&#xff1a;能够给 DOM元素添加事件监听 事件:事件是在编程时系统内发生的动作或者发生的事情&#xff0c;比如用户在网页上单击一个按钮 事件监听:就是让程序检测是否有事件产生&#xff0c;一旦有事件触发&#xff0c;就立即调用一个函…...

编程日记 2024/3/5 13:29:28

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

拼音输入法从上个世纪发展到现在, 已经发展了几十年了, 技术上已经非常成熟了. 换句话说, 就是实际上没多少技术含量, 随便来个人就能手搓一个. 本文介绍一个简单的多平台拼音输入法软件的设计和实现, 支持 GNU/Linux (ibus) 平台 (PC) 和 Android 平台 (手机). 目录 1 中文输…...

编程日记 2024/3/5 13:28:27

Flutter学习7 - Dart 泛型

1、泛型类 //泛型类 class Cache<T> {final Map<String, T> _cache {};void saveData(String key, T value) {_cache[key] value;}//泛型方法T? getData(String key) {return _cache[key];} }void main() {Cache<int> cache1 Cache();const String name…...

编程日记 2024/3/5 13:27:26

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

创建本地仓库&#xff1a; 创建 Git 本地仓库 要提前说的是&#xff0c;仓库是进行版本控制的⼀个文件目录。我们要想对文件进行版本控制&#xff0c;就必须先创建⼀个仓库出来。 首先touch 一个文件&#xff1a; 初始化仓库&#xff1a; 创建完成后&#xff0c;我们会发现当前…...

编程日记 2024/3/5 13:24:21

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

customRef是创建一个自定义的 ref&#xff0c;然后显式声明对其依赖追踪和更新触发的控制方式。因为ref是直接更新的&#xff0c;数据修改会马上更新&#xff0c;而customRef可以认为控制更新的过程&#xff0c;比如可以利用这个api控制 空格输入限制、数据更新速度控制、违规内…...

编程日记 2024/3/5 13:20:16

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

在 Ubuntu 系统下使用 Screen 运行 Python 脚本的优点 在 Ubuntu 操作系统中&#xff0c;Screen 是一种非常有用的工具&#xff0c;特别是在需要长时间运行的任务或者需要在后台运行的任务中。结合 Python 脚本&#xff0c;Screen 提供了一种灵活且高效的方式来管理和执行任务…...

编程日记 2024/3/5 13:19:15

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

文章目录 前言依赖引入绘制 jxls 批注的 excel 模板测试类编写自定义命令关于自动换行 前言 之前的博客中都简单说了数据的渲染和导出excel文件。包括固定的 表头结构&#xff0c;以及动态 表头和表数据等方式。 本篇博客主要说明自定义命令的方式&#xff0c;控制输出excel文…...

编程日记 2024/3/5 13:17:13

前端面试练习24.3.2-3.3

HTMLCSS部分 一.说一说HTML的语义化 在我看来&#xff0c;它的语义化其实是为了便于机器来看的&#xff0c;当然&#xff0c;程序员在使用语义化标签时也可以使得代码更加易读&#xff0c;对于用户来说&#xff0c;这样有利于构建良好的网页结构&#xff0c;可以在优化用户体…...

编程日记 2024/3/5 13:16:12

优先级队列（Java ）

目录 一、 优先级队列1、概念 二、优先级队列的模拟实现1、堆的概念2、堆的存储方式 三、堆的创建1、堆向下调整2、堆的创建3、建堆的时间复杂度 四、堆的插入与删除1、堆的插入2、堆的删除 五、用堆模拟实现优先级队列 一、 优先级队列 1、概念 优先级队列&#xff08;Priori…...

编程日记 2024/3/5 13:15:11

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

随着汽车市场的快速发展&#xff0c;汽车门店的现场管理日益受到关注。6S标准现场检查作为一项重要的评估工具&#xff0c;正在被越来越多的汽车厂商和经销商采用。 6S标准现场检查是指对汽车门店的整理、整顿、清洁、清扫、素养和安全六个方面进行规范和优化&#xff0c;旨在…...

编程日记 2024/3/5 13:10:05

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

本篇文章介绍一下项目中的点赞模块。 点赞模块是一个通过使用Redis实现的功能模块&#xff0c;它提供了点赞操作的处理逻辑和数据存取功能。通过服务类和控制器类的配合&#xff0c;点赞模块实现了用户对实体的点赞、点赞数量的查询、点赞状态的查询等功能。该模块使用了Redis…...

编程日记 2024/3/5 13:09:04

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

AI视野今日CS.CV 计算机视觉论文速览 Fri, 1 Mar 2024 Totally 114 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers DistriFusion: Distributed Parallel Inference for High-Resolution Diffusion Models Authors Muyang Li, Tianle Cai, J…...

编程日记 2024/3/5 13:08:03

【单片机学习的准备】

文章目录 前言一、找一个视频是二、画图软件三、装keil5 仿真protues总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 项目需要&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、找一个视频是 https://www.b…...

编程日记 2024/3/5 13:06:01

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

26个字符&#xff0c;我复制怎么了&#xff1f;26个字符我比较个数怎么了&#xff1f; 顶多时间复杂度*26 本题用固定窗口大小的滑动窗口每次比较包含26个元素的数组次数&#xff0c;最容易写。 动态窗口大小哈希表存数值&#xff08;双指针差值&#xff09;难想难写。 一、动态…...

编程日记 2024/3/5 13:03:59

Kali Linux 2024.1

Kali Linux 2024.1刚刚发布&#xff0c;标志着这个备受欢迎的安全重点Linux发行版在今年的首次重大更新。以其先进的渗透测试和安全审计功能而闻名&#xff0c;它是安全专业人员和爱好者的首选工具。 Kali 2024.1 亮点 本次发布由 Linux 内核 6.6 提供支持&#xff0c;突出了…...

编程日记 2024/3/5 13:02:57

springboot启动加载

目录 使用PostConstruct注解 实现InitializingBean接口 实现CommandLineRunner接口 实现ApplicationRunner接口 使用EventListener注解监听ApplicationReadyEvent事件 应用启动完成之前或者之后&#xff0c;我们需要拿数据库中的一些数据加载到本地缓存中。这些数据一般都…...

编程日记 2024/3/5 13:01:54

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

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容A. 车主端功能B. 停车工作人员功能C. 系统管理员功能1. 停车位模块2. 车辆模块3. 停车记录模块4. IC卡模块5. IC卡挂失模块 三、界面展示3.1 登录注册3.2 车辆模块3.3 停车位模块3.4 停车数据模块3.5 IC卡档案模块3.6 IC卡挂…...

编程日记 2024/3/5 13:00:53

ESD Clamp cell是什么？

ESD CLAMP cell&#xff08;静电放电钳位单元&#xff09;是一种专门设计来保护集成电路&#xff08;IC&#xff09;免受静电放电&#xff08;ESD&#xff09;损害的电路元件。静电放电是在电子设备的组件之间或内部发生的突然电流放电&#xff0c;它可能会损坏电路或降低其性能…...

编程日记 2024/3/5 12:58:52

费率电能表

费率电能表是一种用于测量家庭、商业和工业用电的设备&#xff0c;有效的实现分段计费、分时计费&#xff0c;优化用电效率。费率电能表的产生是为了缓解高峰期的用电负荷&#xff0c;平衡各时间段的用电负荷&#xff1b;根据当地用电负荷曲线情况制定时段费率 在费率电能表中…...

编程日记 2024/3/5 12:54:48

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

只需2张图片&#xff0c;无需测量任何额外数据—— 当当&#xff0c;一个完整的3D小熊就有了&#xff1a; 这个名为DUSt3R的新工具&#xff0c;火得一塌糊涂&#xff0c;才上线没多久就登上GitHub热榜第二。 ▲image 有网友实测&#xff0c;拍两张照片&#xff0c;真的就重建…...

编程日记 2024/3/5 12:53:47

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34