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

【Java 进阶篇】JavaScript 事件详解

news 2025/7/5 7:26:18

在这里插入图片描述

在本篇博客中，我们将深入探讨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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/30 11:49:08

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/7/4 4:41:30

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/6/21 6:59:57

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/6/21 4:11:30

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/6/26 11:27:05

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/6/21 15:51:18

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/6/22 13:19:03