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

【 JS 进阶 】Web APIs （二）

news 2026/5/17 7:34:34

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

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

树莓派机械爪项目实战：从硬件连接到Python控制全解析

1. 项目概述&#xff1a;当树莓派遇上机械爪最近在折腾一个挺有意思的小项目&#xff0c;叫Demwunz/openclaw-pi-installation。光看这个名字&#xff0c;就能猜到个大概&#xff1a;这是一个为树莓派&#xff08;Raspberry Pi&#xff09;准备的机械爪&#xff08;Claw&#x…...

编程新知 2026/5/17 6:29:42

基于PWM舵机与NeoPixel的万圣节互动蝙蝠制作全解析

1. 项目概述&#xff1a;一个会动的万圣节蝙蝠又快到万圣节了&#xff0c;想给家里的装饰来点不一样的“活物”吗&#xff1f;每年都摆静态的南瓜灯和蜘蛛网&#xff0c;总觉得少了点气氛。今年我琢磨着&#xff0c;不如自己动手做一个能扑腾翅膀、眼睛还会发光的机械蝙蝠&…...

编程新知 2026/5/17 3:41:39

系统管理员AI编程实战：基于Claude的运维自动化脚本开发指南

1. 项目概述&#xff1a;一个面向系统管理员的Claude-Code学习与实践仓库最近在整理自己的技术栈时&#xff0c;发现很多系统管理员同行对如何将大型语言模型&#xff08;LLM&#xff09;高效地融入日常运维工作流感到困惑。大家普遍觉得这些AI工具很强大&#xff0c;但具体到写…...

编程新知 2026/5/17 3:27:43

AI对话记忆管理实战：memory-organizer库解决长上下文难题

1. 项目概述&#xff1a;一个为AI记忆体“瘦身”与“归档”的利器最近在折腾一些本地大语言模型&#xff08;LLM&#xff09;的应用&#xff0c;比如搭建个人知识库助手或者长期对话机器人&#xff0c;一个绕不开的痛点就是“记忆”的管理。模型本身没有持久记忆&#xff0c;每…...

编程新知 2026/5/17 1:41:28

学生综合素质评价系统设计实现【附程序】

✨ 长期致力于综合素质评价、AHP层次分析、BP神经网络、遗传算法研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;三层指标体系构建与AHP动态权重分配&…...

编程新知 2026/5/17 0:52:18

紧急更新！MJ v6.1新增--style raw对表现主义的影响深度解析（附6种失效场景急救方案）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;紧急更新&#xff01;MJ v6.1新增--style raw对表现主义的影响深度解析&#xff08;附6种失效场景急救方案&#xff09; MidJourney v6.1 引入的 --style raw 参数并非简单降低美学修饰&#xff0c;而是…...

编程新知 2026/5/17 0:26:12

Midjourney玩具相机风格从翻车到封神：1个--v 6.1专属参数组合+2个隐藏式胶片颗粒注入指令+1套曝光补偿校准表

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney玩具相机风格的视觉本质与审美悖论 失真即真实&#xff1a;玩具相机的光学哲学 玩具相机&#xff08;Toy Camera&#xff09;风格在 Midjourney 中并非简单模拟 Lomography 或 Holga 的物理…...

编程新知 2026/5/17 0:26:11

别再只会`cmatrix`了！解锁Linux终端屏保的10种炫酷玩法（含快捷键大全）

终端美学革命&#xff1a;10种cmatrix高阶玩法与快捷键全解析 当绿色代码雨第一次在终端流淌而下时&#xff0c;那种黑客帝国般的视觉冲击令人难忘。但你是否知道&#xff0c;这个看似简单的cmatrix命令背后隐藏着一个可编程的视觉艺术工具箱&#xff1f;本文将带你突破基础用法…...

编程新知 2026/5/17 0:17:57

支持 SSML 标签，让配音精准控制语调与重音

&#x1f3af; 支持 SSML 标签&#xff0c;让配音精准控制语调与重音在文字转语音&#xff08;TTS&#xff09;应用中&#xff0c;机械感的读音往往缺乏情感。 顶伯文字转语音工具全面支持 SSML&#xff08;语音合成标记语言&#xff09; 标签&#xff0c;让您通过简单标记精准…...

编程新知 2026/5/17 0:03:36

从六度空间到毫秒响应：HNSW图索引如何重塑向量检索

1. 从六度分隔到高维空间&#xff1a;HNSW的思想起源 1967年&#xff0c;社会心理学家斯坦利米尔格拉姆通过著名的"小世界实验"提出了六度分隔理论——地球上任意两个人之间平均只需要5-6个中间人就能建立联系。这个看似简单的社会学发现&#xff0c;却在半个世纪后成…...

编程新知 2026/5/16 23:24:25