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

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

news 2025/9/24 5:05:30

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/9/20 13:58:11

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

pam_env.so模块配置解析

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

编程新知 2025/8/21 21:33:01

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/9/22 13:30:02

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/8/28 18:38:08