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

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

news 2025/8/3 23:03:54

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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/30 3:18:31

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

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

编程新知 2025/8/2 9:40:03

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/8/2 16:59:43

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/7/6 14:15:06

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/8/3 12:52:31

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/30 21:32:24

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/7/30 11:12:25

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/7/9 12:52:41

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2025/8/2 23:52:08

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/8/2 5:02:33