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

【 JS 进阶 】Web APIs （二）

news 2025/7/9 10:09:09

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

学习会为 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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/7/6 4:04:07

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/6/17 9:20:49

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/7/8 11:06:54

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/7/8 21:38:11

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/6/20 13:47:44

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/7/7 15:30:52

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/7/8 18:27:51

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/7/5 20:33:39

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11