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

【Java 进阶篇】JavaScript 事件详解

news 2026/2/10 11:23:27

在这里插入图片描述

在本篇博客中，我们将深入探讨JavaScript事件，这是网页交互的核心。我们将从什么是事件开始，然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终，我们将提供大量的示例代码来帮助您更好地理解JavaScript事件。

什么是事件？

在Web开发中，事件是用户或浏览器发生的事情。这些事件可以是用户与页面互动，例如点击按钮、输入文本或鼠标移动，也可以是页面本身发生的事情，如文档加载完成或定时器触发。

JavaScript允许我们捕获、处理和响应这些事件，使得我们可以创建动态和交互性的网页。

事件的类型

JavaScript支持多种不同类型的事件，包括但不限于：

1. 鼠标事件

  • click：鼠标点击事件。
  • mouseover：鼠标移动到元素上时触发。
  • mouseout：鼠标从元素上移开时触发。
  • mousedown：鼠标按钮被按下时触发。
  • mouseup：鼠标按钮被释放时触发。

2. 键盘事件

  • keydown：键盘上的键被按下时触发。
  • keyup：键盘上的键被释放时触发。

3. 表单事件

  • submit：表单提交时触发。
  • change：表单元素的值发生改变时触发。
  • input：输入框的内容发生变化时触发。

4. 网页加载事件

  • load：整个页面及外部资源加载完成时触发。
  • DOMContentLoaded：DOM结构加载完成时触发，不必等待图片等外部资源加载完毕。

5. 自定义事件

您还可以创建自定义事件，以满足特定需求。

如何注册事件

要在HTML元素上注册事件，您可以使用HTML属性或JavaScript代码。以下是两种主要方法：

1. HTML属性

可以使用以下HTML属性将事件处理程序附加到HTML元素：

<button onclick="myFunction()">点击我</button>

这里onclick是一个事件属性，它告诉浏览器在按钮被点击时执行myFunction函数。

2. JavaScript代码

使用JavaScript，您可以使用addEventListener方法注册事件处理程序：

const button = document.getElementById('myButton');
button.addEventListener('click', myFunction);

这样的方式更具灵活性，可以在JavaScript中动态创建、移除和控制事件。

事件处理程序

事件处理程序是JavaScript函数，它定义了事件触发时要执行的操作。事件处理程序通常带有一个事件对象参数，以便访问事件的相关信息。

function myFunction(event) {alert('按钮被点击了！');
}

事件对象

事件处理程序的参数通常是事件对象，它包含有关事件的详细信息，例如事件类型、目标元素、鼠标坐标等。

function myFunction(event) {console.log('事件类型：' + event.type);console.log('目标元素：' + event.target);console.log('鼠标X坐标：' + event.clientX);console.log('鼠标Y坐标：' + event.clientY);
}

事件对象的属性和方法因事件类型而异，可以根据需要使用。

事件冒泡

事件冒泡是指事件从目标元素冒泡到文档树根元素的过程。这意味着事件会先在最深的嵌套元素上触发，然后逐级向上传播，直到文档树的根元素。

<div id="parent"><button id="child">点击我</button>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');parent.addEventListener('click', function() {console.log('父元素被点击');
});child.addEventListener('click', function() {console.log('子元素被点击');
});

在这个示例中，当点击按钮时，事件会首先在子元素上触发，然后冒泡到父元素。因此，控制台将输出以下内容：

子元素被点击
父元素被点击

您可以使用stopPropagation方法来阻止事件继续冒泡：

child.addEventListener('click', function(event) {console.log('子元素被点击');event.stopPropagation(); // 阻止事件冒泡
});

在这种情况下，只有子元素上的事件处理程序会运行，父元素上的不会执行。

示例代码

让我们通过一些示例代码来演示JavaScript事件的使用。

示例 1：点击按钮改变文本

<!DOCTYPE html>
<html>
<head><title>点击按钮改变文本</title>
</head>
<body><button id="myButton">点击我</button><p id="myText">我会在按钮点击后改变</p><script>const button = document.getElementById('myButton');const text = document.getElementById('myText');button.addEventListener('click', function() {text.textContent = '按钮被点击了！';});</script>
</body>
</html>

示例 2：鼠标悬停显示提示

<!DOCTYPE html>
<html>
<head><title>鼠标悬停显示提示</title><style>.tooltip {position: relative;display: inline-block;cursor: pointer;}.tooltiptext {visibility: hidden;width: 120px;background-color: #333;color: #fff;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;transition: opacity 0.3s;}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}</style>
</head>
<body><div class="tooltip">鼠标悬停我<span class="tooltiptext">这是一个提示</span></div>
</body>
</html>

这两个示例展示了事件处理程序的实际应用，以及如何与CSS样式和HTML元素互动，创造出各种交互效果。

结语

JavaScript事件是Web开发中不可或缺的一部分，使得网页变得更加生动和交互。在本博客中，我们深入探讨了事件的类型、注册事件的方法、事件处理程序、事件对象以及事件冒泡。通过不断练习和实验，您将能够掌握JavaScript事件，创造出更具交互性的网页。祝您编写愉快！

如果您对特定主题有更多的疑问或需要更多的示例代码，请随时向我们提问。我们很乐意为您提供帮助。

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

相关文章：

【Java 进阶篇】JavaScript 事件详解

在本篇博客中&#xff0c;我们将深入探讨JavaScript事件&#xff0c;这是网页交互的核心。我们将从什么是事件开始&#xff0c;然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终&#xff0c;我们将提供大量的示例代码来帮助您更好地…...

编程日记 2023/10/16 1:56:31

动态内存管理+柔性数组+经典笔试题

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…...

编程日记 2023/10/16 1:53:28

SQL和Python，哪个更容易自学？哪个更适合数据工作的编程新手？

如果你想从事数据工作&#xff0c;比如数据分析、数据开发、数据科学等&#xff0c;你可能会遇到这样的问题&#xff1a;SQL和Python哪个更容易自学&#xff1f;哪个更有用&#xff1f;哪个更有前途&#xff1f;其实这两种语言都是数据工作的重要技能&#xff0c;但它们的特点和…...

编程日记 2023/10/16 1:52:27

修改CDB的max_string_size，从STANDARD到EXTENDED

操作过程参考19c官方文档。 具体过程如下。先修改参数并重启&#xff1a; -- 修改参数 -- 注意&#xff1a;即使在 MAX_STRING_SIZE 设置为 EXTENDED 之后&#xff0c;根仍继续使用 STANDARD 语义。 -- 在根中将 MAX_STRING_SIZE 设置为 EXTENDED 的原因是&#xff0c;CDB 中…...

编程日记 2023/10/16 1:51:26

Python 字典

目录 1 字典介绍2 字典的创建3 字典元素的访问4 字典元素添加、修改、删除5 序列解包6 表格数据使用字典和列表存储&#xff0c;并实现访问7 字典核心底层原理(重要)7.1 将一个键值对放进字典的底层过程7.2 扩容7.3 根据键查找“键值对”的底层过程7.4 用法总结&#xff1a; 声…...

编程日记 2023/10/16 1:49:23

【nginx】nginx部署升级htpp+websocket访问

关注todo-step1和todo-step2就行了&#xff1a; user root; …… http {### Basic Settings##sendfile on;tcp_nopush on;types_hash_max_size 2048;client_max_body_size 10240m;include /etc/nginx/mime.types;default_type application/octet-stream;# 配置websocket访问 *…...

编程日记 2023/10/16 1:48:21

C# 生成JWT的Token

using JWT.Algorithms; using JWT; using JWT.Serializers;private string GetToken(string timeStamp, string deptName, string doctorName, string idNo){string token string.Empty;string appID config.AppID;string secretKey config.AppSecret;//十分钟有效期long ex…...

编程日记 2023/10/16 1:46:20

C# AnimeGAN 漫画风格迁移 动漫风格迁移 图像卡通化 图像动漫化

效果 项目 模型 animeganv3_H40_model.onnx animeganv3_H50_model.onnx animeganv3_H64_model.onnx AnimeGANv3_JP_face_v1.0.onnx AnimeGANv3_PortraitSketch_25.onnx Hayao-60.onnx Hayao_64.onnx Paprika_54.onnx Shinkai_53.onnx 下载 可执行文件exe下载 源码下载...

编程日记 2023/10/16 1:45:17

Ruby语言基础知识

Ruby是一种简单快捷的面向对象脚本语言&#xff0c;由日本人松本行弘&#xff08;Yukihiro Matsumoto&#xff09;在20世纪90年代开发&#xff0c;遵守GPL协议和Ruby License。它的灵感和特性来自于Perl、Smalltalk、Eiffel、Ada以及Lisp语言。 以下是Ruby语言的一些特点&#…...

编程日记 2023/10/16 1:44:16

vh、vw、vmin、vmax

1、分别是什么&#xff1f; vh:指屏幕可见视窗的高&#xff0c; vw:指屏幕可见视窗的宽&#xff0c; vmin:vh和vw之间选较小的值&#xff0c; vmax:vh和vw之间选较大的值。 2、和百分比的区别 百分比时基于父元素的宽高&#xff0c;而vh\vw\vmin\vmax基于屏幕可见视图的宽…...

编程日记 2023/10/16 1:43:15

Selenium浏览器启动方式

Chromedriver所有版本下载 原文链接 浏览器的基本操作 普通方式启动浏览器&#xff1a; from selenium import webdriver # 启动Chrom浏览器 browser webdriver.Chrome() # 启动Edge浏览器 browser webdriver.Edge() # 启动Firefox浏览器 browser webdriver.Firefox() br…...

编程日记 2023/10/16 1:42:14

Linux 网络编程 tcp server 笔记

一、TCP 服务器的创建 在 Linux 上创建一个简单的 tcp 服务器步骤如下&#xff1a; ①创建套接字 ②将套接字绑定到 IP 地址和端口号 ③监听来自客户端的连接 ④接受连接并创建新的套接字用于与客户端通信 ⑤通过新建的套接字发送和接收数据 ⑥关闭套接字 流程框图如下&#xf…...

编程日记 2023/10/16 1:41:13

C语言-贪吃蛇 1.输入控制ncurse

一、为什么要用nurse C语言中的gets()、scanf()、getchar()等函数是在用户输入后需要按下Enter键才能执行代码&#xff0c;而贪吃蛇要求按下按键后立即对蛇的方向进行操作&#xff0c;所以根据贪吃蛇功能的需求引入ncurse&#xff0c;让用户输入后就能让蛇进行对应的行动。 二、…...

编程日记 2023/10/16 1:40:12

Pytorvh之Vision Transformer图像分类

文章目录 前言一、Transformer1.Transformer概览2.Self-Attention3.Multi-head Attention4.Position-wise Feed-Forward Networks(位置前馈网络)5.残差连接和层归一化6.Positional Encodings(位置编码) 二、Vision Transformer1.Vision Transformer概览2.Embedding层结构&#…...

编程日记 2023/10/16 1:39:12

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备 最近把NI-IMAQ更新到最新的1394版本。这个新驱动工作良好。但是&#xff0c;当打开MAX&#xff0c;NII MAQ设备却在RT PXI机箱里找不到。 问题最有可能是NIIMAQ服务器的版本跟主机PC和RT目标设备是不同的。为保证通信正常NII MAQ服…...

编程日记 2023/10/16 1:38:10

three.js入门 ---- 相机控件OrbitControls

前言&#xff1a; 自用&#xff01;&#xff01;&#xff01; 文档中描述&#xff1a;OrbitControls本质上就是改变相机的参数&#xff0c;比如相机的位置属性&#xff0c;改变相机位置可以改变相机拍照场景中模型的角度&#xff0c;实现模型的360度旋转预览效果&#xff0c;改…...

编程日记 2023/10/16 1:37:09

数字IC/FPGA面试题目合集解析（一）

数字IC/FPGA面试题目合集解析&#xff08;一&#xff09; 题目概述题目1&#xff0c;计算题2&#xff0c;计算题3&#xff0c;选择题 答案与解析1&#xff0c;计算题2&#xff0c;计算题3&#xff0c;选择题 题目概述 1&#xff0c;计算题&#xff1a;计算该触发器等效的建立保…...

编程日记 2023/10/16 1:36:08

20231014后台面经总结

1.Spring怎么解决循环依赖 形象地解释 为什么三层缓存 我的简单理解&#xff1a; 1.A依赖B&#xff0c;B生成时先注入A未注入属性的原始对象earlySingletonObject 2.引入三级缓存SingletonFacotry的目的是解决aop提前创建代理的步骤&#xff0c;不然它注入的对象跟真实的不一致…...

编程日记 2023/10/16 1:35:07

RabbitMQ的七种工作模式和分别概述

MQ&#xff08;Message Queuing&#xff09;的七种工作模式如下&#xff1a; Point-to-Point (P2P)模式&#xff1a;在这种模式下&#xff0c;消息传递是单向的&#xff0c;即消息从一个生产者发送到一个消费者。消息被放置在队列中&#xff0c;消费者从该队列中取出消息进行处…...

编程日记 2023/10/16 1:33:03

使用Vscode开发C#没有代码提示问题

很多小伙伴在使用Vscode去编写C#脚本的时候会发现没有代码提示&#xff0c;这样你的敲代码速度会变的很慢&#xff01; 错误使用方法 直接把C#脚本拖入到Vscode中进行编写&#xff0c;这样是不会有代码提示的&#xff01; 正确打开办式 Edit&#xff08;编辑&#xff09;…...

编程日记 2023/10/16 1:32:02

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

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

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

编程新知 2025/12/7 12:35:20

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

编程新知 2026/2/7 7:52:16

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

编程新知 2026/2/8 19:10:03