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

【 JS 进阶 】Web APIs （二）

news 2025/7/9 13:21:29

“人生如舞台，每一个瞬间都是一场精彩的表演。在舞台的灯光下，以坚韧为舞伴，跳出自己的独特舞步，创造属于自己的绚丽人生芳华。” - 露易丝·梭罗

学习会为 DOM 注册事件，实现简单可交互的网页特交。

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

<!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><h3>事件监听</h3><p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p><button id="btn">点击改变文字颜色</button><script>// 1. 获取 button 对应的 DOM 对象const btn = document.querySelector('#btn')// 2. 添加事件监听btn.addEventListener('click', function () {console.log('等待事件被触发...')// 改变 p 标签的文字颜色let text = document.getElementById('text')text.style.color = 'red'})// 3. 只要用户点击了按钮，事件便触发了！！！</script>
</body>
</html>

完成事件监听分成3个步骤：

  1. 获取 DOM 元素
  2. 通过 addEventListener 方法为 DOM 节点添加事件监听
  3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
  4. 事件触发后，相对应的回调函数会被执行

大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

事件类型

click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick

<script>// 双击事件类型btn.addEventListener('dblclick', function () {console.log('等待事件被触发...');// 改变 p 标签的文字颜色const text = document.querySelector('.text')text.style.color = 'red'})// 只要用户双击击了按钮，事件便触发了！！！
</script>

结论：【事件类型】决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击。

事件处理程序

addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。

<script>// 双击事件类型btn.addEventListener('dblclick', function () {console.log('等待事件被触发...')const text = document.querySelector('.text')// 改变 p 标签的文字颜色text.style.color = 'red'// 改变 p 标签的文本内容text.style.fontSize = '20px'})
</script>

结论：【事件处理程序】决定了事件触发后应该执行的逻辑。

事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。

鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

  1. `mouseenter 监听鼠标是否移入 DOM 元素
<body><h3>鼠标事件</h3><p>监听与鼠标相关的操作</p><hr><div class="box"></div><script>// 需要事件监听的 DOM 元素const box = document.querySelector('.box');// 监听鼠标是移入当前 DOM 元素box.addEventListener('mouseenter', function () {// 修改文本内容this.innerText = '鼠标移入了...';// 修改光标的风格this.style.cursor = 'move';})</script>
</body>
  1. `mouseleave 监听鼠标是否移出 DOM 元素
<body><h3>鼠标事件</h3><p>监听与鼠标相关的操作</p><hr><div class="box"></div><script>// 需要事件监听的 DOM 元素const box = document.querySelector('.box');// 监听鼠标是移出当前 DOM 元素box.addEventListener('mouseleave', function () {// 修改文本内容this.innerText = '鼠标移出了...';})</script>
</body>

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

焦点事件

focus 获得焦点

blur 失去焦点

文本框输入事件

input

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

<body><h3>事件对象</h3><p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p><hr><div class="box"></div><script>// 获取 .box 元素const box = document.querySelector('.box')// 添加事件监听box.addEventListener('click', function (e) {console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');// 事件回调函数的第1个参数即所谓的事件对象console.log(e)})</script>
</body>

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、e 、ev 。

接下来简单看一下事件对象中包含了哪些有用的信息：

  1. ev.type 当前事件的类型
  2. ev.clientX/Y 光标相对浏览器窗口的位置
  3. ev.offsetX/Y 光标相于当前 DOM 元素的位置

注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

环境对象

能够分析判断函数运行在不同环境中 this 所指代的对象。

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。

<script>// 声明函数function sayHi() {// this 是一个变量console.log(this);}// 声明一个对象let user = {name: '张三',sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性}let person = {name: '李四',sayHi: sayHi}// 直接调用sayHi() // windowwindow.sayHi() // window// 做为对象方法调用user.sayHi()// userperson.sayHi()// person
</script>

结论：

  1. this 本质上是一个变量，数据类型为对象
  2. 函数的调用方式不同 this 变量的值也不同
  3. 【谁调用 this 就是谁】是判断 this 值的粗略规则
  4. 函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

<script>// 声明 foo 函数function foo(arg) {console.log(arg);}// 普通的值做为参数foo(10);foo('hello world!');foo(['html', 'css', 'javascript']);function bar() {console.log('函数也能当参数...');}// 函数也可以做为参数！！！！foo(bar);
</script>

函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！

我们回顾一下间歇函数 setInterval

<script>function fn() {console.log('我是回调函数...');}// 调用定时器setInterval(fn, 1000);
</script>

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

<script>// 调用定时器，匿名函数做为参数setInterval(function () {console.log('我是回调函数...');}, 1000);
</script>

结论：

  1. 回调函数本质还是函数，只不过把它当成参数使用
  2. 使用匿名函数做为回调函数比较常见

相关文章：

【 JS 进阶 】Web APIs （二）

“人生如舞台&#xff0c;每一个瞬间都是一场精彩的表演。在舞台的灯光下&#xff0c;以坚韧为舞伴&#xff0c;跳出自己的独特舞步&#xff0c;创造属于自己的绚丽人生芳华。” - 露易丝梭罗 学习会为 DOM 注册事件&#xff0c;实现简单可交互的网页特交。 事件是编程语言中的…...

编程日记 2024/2/25 9:26:00

解决弹性布局父元素设置高自动换行，子元素均分高度问题（align-content: flex-start）

案例&#xff1a; <view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view> </view> <style lang"less">.abc{height: 100px;display: flex;flex-wrap: …...

编程日记 2024/2/25 9:24:59

什么是负载均衡集群？

目录 1、集群是什么&#xff1f; 2、负载均衡集群技术 3、负载均衡集群技术的实现 4、实现效果如图 5、负载均衡分类 6、四层负载均衡&#xff08;基于IP端口的负载均衡&#xff09; 7、七层的负载均衡&#xff08;基于虚拟的URL或主机IP的负载均衡) 8、四层负载与七层…...

编程日记 2024/2/25 9:21:56

【es6】的新特性

声明语法 letconstclass字符串/函数/对象/数组的新语法/扩展功能模版字符串 反引号标签函数Proxy /ReflectPromiseclsss & static 静态方法 & extends 继承SetMapSymbolfor of 可迭代对象迭代器模式 通过 Symbol.interator 对外提供统一个接口外部可以通过 for...of 去…...

编程日记 2024/2/25 9:20:55

Java中的多线程是如何实现的？

在Java中&#xff0c;多线程的实现主要依赖于java.lang.Thread类和java.util.concurrent包中的类。以下是Java实现多线程的基本方法和概念&#xff1a; 1. **继承Thread类&#xff1a;** - 创建一个新的类继承自Thread类。 - 重写Thread类的run()方法&#xff0c;定义线…...

编程日记 2024/2/25 9:18:53

C++知识点总结(22)：模拟算法

一、概念 模拟算法 根据题目描述进行筛选提取关键要素&#xff0c;按需求书写代码解决实际问题的算法。 二、步骤 1、提取题目的关键要素 2、根据关键要素的需求完成代码 三、关键要素 1、题目目的 2、样例的执行逻辑&#xff08;样例分析&#xff09; 3、数据范围&#xff08;…...

编程日记 2024/2/25 9:17:52

opengl 学习纹理

一.纹理是什么&#xff1f; 纹理是一个2D图片&#xff08;甚至也有1D和3D的纹理&#xff09;&#xff0c;它可以用来添加物体的细节&#xff1b;类似于图像一样&#xff0c;纹理也可以被用来储存大量的数据&#xff0c;这些数据可以发送到着色器上。 采样是指用纹理坐标来获取纹…...

编程日记 2024/2/25 9:15:50

STM32控制max30102读取血氧心率数据(keil5工程)

一、前言 MAX30102是一款由Maxim Integrated推出的低功耗、高精度的心率和血氧饱和度检测传感器模块&#xff0c;适用于可穿戴设备如智能手环、智能手表等健康管理类电子产品。 该传感器主要特性如下&#xff1a; &#xff08;1&#xff09;光学测量&#xff1a;MAX30102内置…...

编程日记 2024/2/25 9:14:49

高级语言期末2011级A卷

1.编写函数&#xff0c;判定正整数m和n&#xff08;均至少为2&#xff09;是否满足&#xff1a;数m为数n可分解的最小质因数&#xff08;数n可分解的最小质因数为整除n的最小质数&#xff09; 提示&#xff1a;判定m为质数且m是n的最小因数 #include <stdio.h> #include…...

编程日记 2024/2/25 9:11:44

SpringAMQP消息队列

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>配置文件 spring:rabbitmq:host: 172.27.99.52 # rabbitMQ的ip地址port: 5672 # 端口username: abcpa…...

编程日记 2024/2/25 9:10:43

二次元风格个人主页HTML源码

源码介绍 直接上传服务器压缩包解压就完事了&#xff0c;修改index.html内代码即可&#xff0c;注释写的很全&#xff0c;替换图片在文件夹img&#xff0c;只有前端&#xff0c;没有后台&#xff0c;大佬如果需要&#xff0c;可以自行添加后台。本源码非常适合个人工作室主页。…...

编程日记 2024/2/25 9:08:41

每日学习录

目录 [蓝桥杯 2022 省 A] 求和 题目描述 [蓝桥杯 2019 省 B] 特别数的和 题目描述 [蓝桥杯 2023 省 A] 填空问题 题目描述 [蓝桥杯 2020 省 AB1] 走方格 题目描述 [蓝桥杯 2017 省 AB] 分巧克力 [蓝桥杯 2016 省 B] 交换瓶子 题目描述 [蓝桥杯 2022 省 A] 求和 题目描…...

编程日记 2024/2/25 9:00:33

linux docker部署深度学习环境（docker还是conda）

在深度学习中&#xff0c;避免不了在远程服务器上进行模型的训练&#xff0c;如果直接在服务器裸机的基础环境跑显然是不可取的&#xff0c;此时搭建用于模型训练的docker环境显得尤为重要。 在深度学习中&#xff0c;避免不了在远程服务器上进行模型的训练&#xff0c;如果直…...

编程日记 2024/2/25 8:59:32

iOS面试：4.多线程GCD

一、多线程基础知识 1.1 什么是进程&#xff1f; 进程是指在系统中正在运行的一个应用程序。对于电脑而已&#xff0c;你打开一个软件&#xff0c;就相当于开启了一个进程。对于手机而已&#xff0c;你打开了一个APP&#xff0c;就相当于开启了一个进程。 1.2 什么是线程&am…...

编程日记 2024/2/25 8:56:29

云计算计算资源池与存储池访问逻辑

在云计算环境中&#xff0c;计算资源池和存储池通常是分开管理和访问的。计算资源池包含了用于运行虚拟机的 CPU、内存等计算资源&#xff0c;而存储池则提供了用于存储虚拟机镜像、数据等的存储资源。 计算资源池和存储池之间通常通过网络进行访问&#xff0c;它们之间不存在直…...

编程日记 2024/2/25 8:53:27

【Linux】部署单机项目(自动化启动)---(图文并茂详细讲解）

目录 一 准备工作 1.1 连接服务器拷贝文件 1.2 解压 二 JDK安装 2.1 配置坏境变量 2.2 查看版本 三 Tomcat(自启动) 3.1 复制启动命令的位置 3.2 添加命令相关配置文件 3.2.1 配置jdk及tomcat目录 3.2.2 添加优先级 3.3 设置自启动命令 3.4 开放端口 四 My…...

编程日记 2024/2/25 8:52:26

修复Microsoft Edge WebView2无法安装的问题

修复Microsoft Edge WebView2无法安装的问题 场景解决方案 场景 系统&#xff1a;win11 电脑&#xff1a;联想14 前提&#xff1a;使用Geek Uninstaller强制删除了Microsoft Edge WebView2 同时下载了clash verge。 发现根本无法运行&#xff08;点击了无任何反应且图标颜色…...

编程日记 2024/2/25 8:47:22

Linux命令-chgrp命令（用来变更文件或目录的所属群组）

说明 chgrp命令 用来改变文件或目录所属的用户组。该命令用来改变指定文件所属的用户组。其中&#xff0c;组名 可以是用户组的id&#xff0c;也可以是用户组的组名。文件名可以 是由空格分开的要改变属组的文件列表&#xff0c;也 可以是由通配符描述的文件集合。如果用户不是…...

编程日记 2024/2/25 8:43:18

linux下搭建boost、muduo、mysql、nginx

参考博客&#xff1a; 1.boost&#xff1a;C网络编程 - Boost::asio异步网络编程 - 01- boost库源码编译安装 2.muduo&#xff1a;C muduo网络库知识分享01 - Linux平台下muduo网络库源码编译安装 3.mysql&#xff1a; sudo apt-get install mysql-server sudo apt-get inst…...

编程日记 2024/2/25 8:42:17

java基础-List常用方法

目录 常用方法逆序升序List<自定义类>排序List删除元素List转String数组List的add函数查找一个,分隔的字符串中是否有某值根据.分割字符串根据空格分隔字符串 常用方法 逆序 Collections.reverse(List) 升序 Collections.sort(List) List<自定义类>排序 首先…...

编程日记 2024/2/25 8:41:16

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/7/9 11:13:42

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/7/5 18:14:39

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/7/7 0:36:06

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/7/7 23:02:01

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/6/21 15:45:49

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/7/8 17:49:38

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/7/9 6:59:52

从物理机到云原生：全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

编程新知 2025/7/8 23:01:05

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2025/7/7 1:06:16

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/7/8 11:08:39