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

JavaScript【6】事件

article 2025/9/22 14:32:06

1.概述：

在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。

它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面加载完成、元素获得或失去焦点等情况。这些事件可以被 JavaScript 代码捕获并进行相应的处理。

2.表单事件：

1.获取/失去焦点：onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onblur = function () {//失去焦点时this.style.backgroundColor = "green";}text.onfocus = function () {//获得焦点时this.style.backgroundColor = "red";}
</script></body>
</html>

默认输入框背景无填充色，只有触发下面事件才会将背景填充为对应颜色

点击输入框，此时获得焦点，触发获得焦点事件，将输入框背景改为红色

点击输入框以外的区域，此时失去焦点，触发失去焦点事件，将输入框背景改为绿色

2.节点内容改变：onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onchange = function () {//节点的内容改变时console.log(this.value)}
</script></body>
</html>

当输入1时，控制台输入1；

当删除输入框中的1后再重新输入1，发现控制台没有再次输出，说明此时没有触发该事件；

当输入框内的内容发送改变时，会再次触发该事件，并将输入值打印到控制台；

3.输入框有内容输入时：oninput

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.oninput = function () {//在用户输入时执行console.log(this.value)}
</script></body>
</html>

没有内容输入时，不触发该事件；

输入内容时，会将输入内容打印到控制台

当删除输入框内容时，会触发该事件，控制台打印空数据

当再次输入1时，再次触发该事件，控制台再次打印该数据

4.选取元素时：onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onselect = function () {console.log("选取元素时执行",this.value)}</script></body>
</html>

输入框输入内容时，不触发该事件

当选取输入内容时，触发该事件，将输入内容打印到控制台

5.提交时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return false;}*/</script></body>
</html>

此时返回值为false，点击提交按钮时不会触发提交事件，该表单不会被提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return true;}</script></body>
</html>

当返回值为true时，点击提交按钮会触发该事件，该表单会被提交（#表示提交到当前页面）

3.窗口事件：

1.获得/失去焦点时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onblur = function () {console.log('窗口失去了焦点')}window.onfocus = function () {console.log('窗口获得了焦点')}</script></body>
</html>

此时刚打开页面，不触发事件，所以控制台无输出

当点击左侧窗口区域时，触发获得焦点事件，控制台打印对应内容

当再次点击窗口外区域时，触发失去焦点事件，控制台再次打印对应内容

2.页面加载完成时：onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onload= function () {//当页面加载完成后执行console.log("页面加载完成")}</script></body>
</html>

 当使用低网速加载测试时，可以发现，不是一打开页面就会触发该事件，而是只有当整个页面加载出来后，才会触发该事件；

3.窗口大小改变时：onresize

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.onresize= function () {console.log("页面大小正在改变")}</script></body>
</html>

页面加载完成时，未触发事件

此时将窗口区域面积减小时，触发了该事件，并在控制台打印对应信息

4.键盘事件：

1.键盘按下时触发：onkeydown

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");//键盘按下时执行text.onkeydown = function (event) {// 解决兼容问题event = event || window.event;// key 按键//console.log("按下的键：", event.keyCode)console.log("按下的键：",event.key)}</script></body>
</html>

只要在键盘上按下按键，每按一次就会触发一次该事件，（如果长按则会重复触发），并将按键输出到控制台；

2.键盘弹起时触发：onkeyup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeyup = function (event) {console.log("按键弹起时：",event.key)}</script></body>
</html>

当长按1时，不会触发该事件，只有当松开时，会触发1次该事件

3.按下弹起时触发：onkeypress

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeypress = function (event) {console.log("按下弹起时：",event.key)}</script></body>
</html>

只有当按下并松开时才会触发该事件

4.案例：通过方向键控制色块移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;"></div>
<script>let box = document.getElementById("box");document.onkeydown = function (event) {let speed = 10;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";break;}}</script></body>
</html>

这是页面刚加载出来时色块的位置，此时我们可以通过方向键改变色块的位置

5.鼠标事件：

1.单击左键触发：onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onclick = function () {console.log("单击事件触发");}</script>
</body>
</html>

在元素区域（色块）内，单机鼠标左键，触发该事件

2.双击触发：ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.ondblclick = function () {console.log("双击事件触发");}</script>
</body>
</html>

双击元素区域，触发该事件

3.鼠标任意按键按下或松开时触发：onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousedown = function () {console.log("鼠标按钮按下时");}box.onmouseup = function () {console.log("鼠标按钮松开时");}</script>
</body>
</html>

在元素区域内按下或松开鼠标任意按键对会触发对应事件

4.鼠标指针移动时触发：onmousemove

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousemove = function () {console.log("鼠标指针移动时");}</script>
</body>
</html>

当鼠标指针在元素区域内移动时，就会重复触发该事件

5.鼠标指针移入或移出时触发：

不能阻止事件冒泡：onmouseover/onmouseout

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseover = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseout = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

可以阻止事件冒泡：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseenter = function () {// 能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseleave = function () {// 能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

6.鼠标滚轮滑动时触发：

1.有无内容都可触发（滑动滚轮）：onmousewheel

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");// 有没有内容都会触发/* box.onmousewheel = function () {console.log("鼠标的滚轮滚动时")}*/</script>
</body>
</html>

在元素区域内滑动鼠标滚轮，不管元素区域内有没有内容，都会触发该事件

2.必须有内容才会触发（滑动滚动条）：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内无内容，滑动鼠标滚轮不会触发该事件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内有内容，当我们滑动鼠标滚轮时会重复触发该事件

6.事件冒泡：

1.概述：

  事件冒泡 （Bubble）：是指事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；

2.示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")}
</script>
</body>
</html>

 在上面案例中，DIV2作为DIV1的子节点，当我们单击DIV2区域时，鼠标单击事件会向上传导到其父节点DIV1中，通过测试结果我们也可以看出当我们单击子节点div2时，不仅div2节点触发了该事件，其父节点div1节点也触发了该事件；

3.避免事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")stopBubble();}//取消事件的冒泡function stopBubble(event) {//处理浏览器兼容性问题if (event && event.stopPropagation) {event.stopPropagation()} else {window.event.cancelBubble = true;}}
</script>
</body>
</html>

此时单击div2区域，该事件不会再传导到其父节点div1中；

JavaScript【6】事件

1.概述： 在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面…...

编程日记 2025/9/8 18:20:37

STM32F10xx 参考手册

6. 什么是寄存器本章参考资料：《STM32F10xx 参考手册》、《STM32F10xx数据手册》、学习本章时，配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读，效果会更佳，特别是涉及到寄存器说明的部分。…...

编程日记 2025/9/18 0:34:02

使用Docker部署Nacos

sudo systemctl start docker sudo systemctl enable docker docker --version 步骤 2: 拉取 Nacos Docker 镜像拉取 Nacos 镜像： 你可以从 Docker Hub 上拉取官方的 Nacos 镜像，使用以下命令： docker pull nacos/nacos-server 这会从 …...

编程日记 2025/9/17 15:22:43

深度学习中ONNX格式的模型文件

一、模型部署的核心步骤模型部署的完整流程通常分为以下阶段，用 “跨国旅行” 类比： 步骤类比解释技术细节1. 训练模型学会一门语言（如中文）用 PyTorch/TensorFlow 训练模型2. 导出为 ONNX翻译成国际通用语言（如英语…...

编程日记 2025/9/18 18:51:09

TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性

Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…...

编程日记 2025/9/20 17:15:54

Redis 发布订阅模式深度解析：原理、应用与实践

在现代分布式系统架构中，实时消息传递机制扮演着至关重要的角色。Redis 作为一款高性能的内存数据库，其内置的发布订阅(Pub/Sub)功能提供了一种轻量级、高效的消息通信方案。本文将全面剖析 Redis 发布订阅模式，从其基本概念、工作原理到实际…...

编程日记 2025/9/22 10:32:45

环形缓冲区 ring buffer 概述

环形缓冲区 ring buffer 概述 1. 简介环形缓冲区（ring buffer），是一种用于表示一个固定尺寸、头尾相连的缓冲区的数据结构，适合缓存数据流。也称作环形缓冲区（circular buffer），环形队列&…...

编程日记 2025/8/6 2:32:27

飞帆控件 post or get it when it has get

我在这里分享两个链接： post_get_it 设计 - 飞帆有人看出来这个控件是干什么用吗？ 控件的配置：...

编程日记 2025/9/22 13:16:25

SQL里where条件的顺序影响索引使用吗？

大家好，我是锋哥。今天分享关于【SQL里where条件的顺序影响索引使用吗？】面试题。希望对大家有帮助； SQL里where条件的顺序影响索引使用吗？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 SQL 查询中，W…...

编程日记 2025/9/11 22:05:07

SAP学习笔记 - 开发豆知识02 - com.sap.cds.services.cds.CdsService 废止，那么用什么代替呢？

我看很多人代码里面用的都是这个CdsService类，可以自从2.0版本往上这个类就没了啊。它的代替是什么呢？用的CqnService 那么怎么查的呢？ 我也是下载好几个包，解压看，然后发现这里还可以直接看，挺方便的。…...

编程日记 2025/9/19 10:14:54

OpenResty 深度解析：构建高性能 Web 服务的终极方案

引言 openresty是什么？在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列我们分别从初始化阶段，重写/访问阶段，内容阶段，日志…...

编程日记 2025/9/11 22:04:52

什么是路由器环回接口？

路由器环回接口（LoopbackInterface）是网络设备中的一种逻辑虚拟接口，不依赖物理硬件，但在网络配置和管理中具有重要作用。以下是其核心要点： 一、基本特性 1.虚拟性与稳定性环回接口是纯软件实现的逻辑接口&#x…...

编程日记 2025/9/20 8:18:43

OpenHarmony：开源操作系统重塑产业数字化底座

OpenHarmony：开源操作系统重塑产业数字化底座引言：当操作系统成为数字公共品在万物智联时代，操作系统不再是科技巨头的专属领地。华为捐赠的OpenHarmony项目，正以开源协作模式重构操作系统产业格局。这个脱胎于商业版本的开源…...

编程日记 2025/8/6 9:40:20

【MySQL进阶】如何在ubuntu下安装MySQL数据库

前言 🌟🌟本期讲解关于如何在ubuntu环境下安装mysql的详细介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 &#x1f3…...

编程日记 2025/9/20 5:30:59

【数据结构】_二叉树

1.二叉树链式结构的实现 1.1 前置说明在学习二叉树的基本操作前，需先要创建一棵二叉树，然后才能学习其相关的基本操作。由于现在大家对二叉树结构掌握还不够深入，为了降低大家学习成本，此处手动快速创建一棵简单的二叉树&#x…...

编程日记 2025/9/17 23:31:42

给图表组件上点“颜色” —— 我与 CodeBuddy 的合作记录

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴前段时间，我在开发一个 Vue3 项目的时候，碰到了一个小小的挑战：我想做一个可…...

编程日记 2025/9/11 22:04:14

使用 YOLO 结合 PiscTrace 实现股票走势图像识别

在智能投研和金融分析中，自动识别图表中的模式（如 K 线走势、支撑/阻力位、形态结构）成为一种新兴手段。传统的技术分析依赖大量人工判断，而计算机视觉技术的发展，特别是 YOLO 模型在图像识别领域的高效表现&#xff0…...

编程日记 2025/9/14 12:16:29

OpenCV中的光流估计方法详解

文章目录一、引言二、核心算法原理1. 光流法基本概念2. 算法实现步骤三、代码实现详解1. 初始化设置2. 特征点检测3. 光流计算与轨迹绘制四、实际应用效果五、优化方向六、结语一、引言在计算机视觉领域，运动目标跟踪是一个重要的研究方向，广泛应用…...

编程日记 2025/9/11 22:03:26

OpenCL C++ 常见属性与函数

核心对象与属性对象/属性描述示例cl::Platform表示OpenCL平台cl::Platform::get(&platforms)cl::Device表示计算设备cl::Device::getDefault()cl::Context管理设备、内存和命令队列的上下文cl::Context(contextDevices)cl::CommandQueue命令队列，用于提交命令cl::Command…...

编程日记 2025/6/22 2:17:17

Android核心系统服务：AMS、WMS、PMS 与 system_server 进程解析

1. 引言在 Android 系统中，ActivityManagerService (AMS)、WindowManagerService (WMS) 和 PackageManagerService (PMS) 是三个最核心的系统服务，它们分别管理着应用的生命周期、窗口显示和应用包管理。但你是否知道，这些服务并不是独立…...

编程日记 2025/9/20 8:25:33

18.自动化生成知识图谱的多维度质量评估方法论

文章目录一、结构维度评估1.1 拓扑结构评估1.1.1 基础图论指标1.1.2 层级结构指标 1.2 逻辑一致性评估1.2.1 形式逻辑验证1.2.2 约束满足度二、语义维度评估2.1 语义一致性评估2.1.1 标签语义分析2.1.2 关系语义评估 2.2 语义表示质量2.2.1 嵌入质量2.2.2 上下文语义评估三、…...

编程日记 2025/7/13 18:10:08

【行为型之命令模式】游戏开发实战——Unity可撤销系统与高级输入管理的架构秘钥

文章目录 ⌨️ 命令模式（Command Pattern）深度解析一、模式本质与核心价值二、经典UML结构三、Unity实战代码（可撤销的建造系统）1. 定义命令接口与接收者2. 实现具体命令3. 命令管理器（Invoker）4. 客户端使…...

编程日记 2025/9/19 18:21:51

图论模板（部分）

图论模板（部分） maincpp #include <iostream> #include <climits> #include <limits>typedef unsigned long long ull; typedef long long ll; typedef long double ld; typedef std::pair<int, int> PII;#define rep(i, n) f…...

编程日记 2025/9/20 22:14:53

LeetCode 热题 100_寻找重复数（100_287_中等_C++）（技巧）(暴力解法；哈希集合；二分查找)

LeetCode 热题 100_寻找重复数（100_287_中等_C） 题目描述：输入输出样例：题解：解题思路：思路一（暴力解法）：思路二（哈希集合）：思路三&am…...

编程日记 2025/8/12 1:15:11

NBA足球赛事直播源码体育直播M33模板赛事源码

源码名称：体育直播赛事扁平自适应M33直播模板源码开发环境：帝国cms7.5 空间支持：phpmysql 带软件采集，可以挂着自动采集发布，无需人工操作！ 演示地址：NBA足球赛事直播源码体育直播M33模板赛事…...

编程日记 2025/9/11 22:02:55

【QT 项目部署指南】使用 Inno Setup 打包 QT 程序为安装包（超详细图文教程）

一、为什么需要打包成安装包？ 在完成 QT 项目开发后，直接发布可执行文件（.exe）和依赖的 DLL 文件虽然可行，但存在以下问题： 用户体验差：用户需手动管理文件路径，容易因文件缺失导致…...

编程日记 2025/7/9 2:32:19

电子电器架构 --- 整车造车阶段四个重要节点

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...

编程日记 2025/9/11 22:02:48

黑马点评-用户登录

文章目录用户登录发送短信验证码注册/登录校验登录用户登录发送短信验证码 public Result sendCode(String phone, HttpSession session) {// 1.校验手机号if (RegexUtils.isPhoneInvalid(phone)) {// 2.如果不符合，返回错误信息return Result.fail("手机…...

编程日记 2025/9/11 22:02:20

ecmascript 第6版特性 ECMA-262 ES6

https://blog.csdn.net/zlpzlpzyd/article/details/146125018 在之前写的文章基础上，ES6在export和import的基础外，还有如下特性特性说明let/const块级作用域变量声明>箭头函数Promise异步编程...

编程日记 2025/8/15 17:39:52

十二、Hive 函数

作者：IvanCodes 日期：2025年5月1日专栏：Hive教程在数据处理的广阔天地中，我们常常需要对数据进行转换、计算、清洗或提取特定信息。Hive 提供了强大的内置运算符和丰富的内置函数库，它们就像魔法师手中的魔法棒&…...

编程日记 2025/9/11 22:02:01

1.概述：

2.表单事件：

1.获取/失去焦点：onfocus/onblur

2.节点内容改变：onchange

3.输入框有内容输入时：oninput

4.选取元素时：onselect

5.提交时：

3.窗口事件：

1.获得/失去焦点时：

2.页面加载完成时：onload

3.窗口大小改变时：onresize

4.键盘事件：

1.键盘按下时触发：onkeydown

2.键盘弹起时触发：onkeyup

3.按下弹起时触发：onkeypress

4.案例：通过方向键控制色块移动

5.鼠标事件：

1.单击左键触发：onclick

2.双击触发：ondblclick

3.鼠标任意按键按下或松开时触发：onmousedown/onmouseup

4.鼠标指针移动时触发：onmousemove

5.鼠标指针移入或移出时触发：

不能阻止事件冒泡：onmouseover/onmouseout

可以阻止事件冒泡：

6.鼠标滚轮滑动时触发：

1.有无内容都可触发（滑动滚轮）：onmousewheel

2.必须有内容才会触发（滑动滚动条）：

6.事件冒泡：

1.概述：

2.示例：

3.避免事件冒泡：

相关文章：