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

【 JS 进阶 】Web APIs （二）

news 2026/4/1 10:01:33

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

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

ClickHouse数据报表实战：如何把分组后的明细‘压缩’成一行摘要（附完整SQL）

ClickHouse数据报表实战&#xff1a;高效聚合多行文本的工程化解决方案 在数据分析与报表生成的实际业务场景中&#xff0c;我们经常遇到这样的需求&#xff1a;需要将同一维度下的多条文本明细&#xff08;如用户行为日志、错误信息、月份列表等&#xff09;合并成一条简洁的摘…...

编程新知 2026/4/1 9:23:51

Python 批量导出数据库数据至 Excel 文件

简介 langchain专门用于构建LLM大语言模型&#xff0c;其中提供了大量的prompt模板&#xff0c;和组件&#xff0c;通过chain(链)的方式将流程连接起来&#xff0c;操作简单&#xff0c;开发便捷。 环境配置 安装langchain框架 pip install langchain langchain-community 其中…...

编程新知 2026/4/1 8:51:09

开源项目常见安装故障的系统性排查与解决

开源项目常见安装故障的系统性排查与解决 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom nodes of ComfyUI. Fur…...

编程新知 2026/4/1 8:40:55

Krita AI Diffusion IP-Adapter功能异常深度排查与解决方案

Krita AI Diffusion IP-Adapter功能异常深度排查与解决方案 【免费下载链接】krita-ai-diffusion Streamlined interface for generating images with AI in Krita. Inpaint and outpaint with optional text prompt, no tweaking required. 项目地址: https://gitcode.com/g…...

编程新知 2026/4/1 8:00:03

WSL2下USB串口设备‘失踪’？手把手教你找回/dev/ttyUSB0（以Quectel模块为例）

WSL2下USB串口设备消失的终极解决方案&#xff1a;从原理到实战 最近在WSL2环境下调试Quectel模块时&#xff0c;发现一个奇怪现象&#xff1a;lsusb明明能识别设备&#xff0c;但/dev/ttyUSB0却神秘失踪。这让我想起去年调试树莓派时遇到的类似问题&#xff0c;但WSL2的环境特…...

编程新知 2026/4/1 7:51:49

Windows环境下coturn服务器部署与配置实战

1. Windows下coturn服务器部署全攻略 最近在做一个WebRTC项目时&#xff0c;发现很多开发者卡在了TURN服务器搭建这个环节。特别是需要在Windows环境下部署coturn的场景&#xff0c;网上的资料要么太零散&#xff0c;要么直接照搬Linux的教程。今天我就把自己在Windows 10上通过…...

编程新知 2026/4/1 7:47:37

租车宝 token、payload算法分析

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 部分python代码 url "/queryOr…...

编程新知 2026/4/1 7:10:48

2025年11月一区SCI-壁虎优化算法Gekko Japonicus Algorithm-附Matlab免费代码

引言 近年来&#xff0c;在合理框架内求解优化问题的元启发式算法的发展引起了全球科学界的极大关注。本期介绍一种新的创新算法——壁虎优化算法Gekko Japonicus Algorithm&#xff0c;GJA。该算法的灵感主要来自于壁虎的捕食策略和生存行为。通过模拟壁虎的混合运动模式、定…...

编程新知 2026/4/1 7:08:46

OpenClaw创始人加入OpenAI：这不是跳槽新闻，是整个AI行业换挡的信号

OpenClaw创始人加入OpenAI&#xff1a;这不是跳槽新闻&#xff0c;是整个AI行业换挡的信号摘要OpenClaw创始人Peter Steinberger正式加入OpenAI&#xff0c;项目移交开源基金会。Sam Altman亲自官宣&#xff0c;称他是"天才"。这件事的真正意义不在人事变动&#xff…...

编程新知 2026/4/1 6:54:07

FileConverter：重构文件格式转换流程，实现设计师与教育工作者的效率突破

FileConverter&#xff1a;重构文件格式转换流程&#xff0c;实现设计师与教育工作者的效率突破 【免费下载链接】FileConverter File Converter is a very simple tool which allows you to convert and compress files using the context menu in windows explorer. 项目地…...

编程新知 2026/4/1 6:37:56