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

JavaScript 事件

news 2026/3/27 11:48:21

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

实例1

<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test1</title> 
</head>
<body><button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p></body>
</html>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

实例2

<button οnclick="this.innerHTML=Date()">现在的时间是?</button>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test2</title> 
</head>
<body><button onclick="this.innerHTML=Date()">现在的时间是?</button></body>
</html>

在这个实例中，代码将修改自身元素的内容 (使用 this.innerHTML): 

实例3

<button οnclick="displayDate()">现在的时间是?</button>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test3</title> 
</head>
<body><p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p></body>
</html>

在这个实例中，主要是通过事件属性来调用。 

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover鼠标指针移动到指定的元素上时发生
onmouseout用户从一个 HTML 元素上移开鼠标时发生
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

JavaScript 作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。

相关文章：

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。 当在 HTML 页面中使用 JavaScript 时&#xff0c; JavaScript 可以触发这些事件。 HTML 事件 HTML 事件可以是浏览器行为&#xff0c;也可以是用户行为。 以下是 HTML 事件的实例&#xff1a; HTML 页面完成加载HTML input 字段改变…...

编程日记 2023/10/16 17:20:43

轻松学会这招，给大量视频批量添加滚动字幕不求人

想要给大量视频批量添加滚动字幕不求人吗&#xff1f;下面就教你一个简单的方法。首先你需要下载并安装一款名为“固乔剪辑助手”的软件&#xff0c;这是一款非常专业的视频剪辑软件&#xff0c;它可以帮助你快速地给大量视频添加滚动字幕。 打开固乔剪辑助手软件后&#xff0c…...

编程日记 2023/10/16 17:19:42

哪个文字转语音配音软件最好用？

现在TTS技术不断发展&#xff0c;文字转语音技术已经越来越成熟&#xff0c;声音听着拟人度非常高&#xff0c;现在好用的软件也不在少数。很多手机里面都有自带的朗读功能&#xff0c;如果觉得声音不够&#xff0c;也可以自己下载软件使用。给大家分享一下我一直使用的一款文字…...

编程日记 2023/10/16 17:18:41

多关键词高亮显示

引入关键词文件&#xff0c;符合有条件的背景色高亮显示&#xff0c;也可取消。 <div id"testHtml"><p>写入的文本</p><p>关键词</p></div> var str 多个关键词&#xff0c;关键词文件&#xff0c;关键词 var strL str.replac…...

编程日记 2023/10/16 17:17:39

浅谈 33 台 iPad 发展史；OpenAI“悄悄”修改了企业核心价值观丨 RTE 开发者日报 Vol.67

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 **观点 **」、「有意思的 数据 」、「有思考…...

编程日记 2023/10/16 17:16:37

Mysql之备份（Mysqldump）

本篇文章旨在介绍Mysql的备份&#xff0c;借助mysqldump命令。 1.准备数据 准备一个数据库d1&#xff0c;表t1 表结构如下&#xff1a; mysql> desc t1; ------------------------------------------------------- | Field | Type | Null | Key | Default | Extra …...

编程日记 2023/10/16 17:15:36

算法leetcode｜84. 柱状图中最大的矩形（rust重拳出击）

文章目录 84. 柱状图中最大的矩形&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 84. 柱状图中最大的矩形&#xff1a; 给定 n 个非负整…...

编程日记 2023/10/16 17:14:33

Java中通过List中的stream流去匹配相同的字段去赋值，避免for循环去查询数据库进行赋值操作

List<EquipmentDeviceMessage> equipmentDeviceMessageInfo greenThinkTanksInfoPlanMapper.getEquipmentDeviceMessageInfo(phone, startDate, endDate); List<BladeUserVo> userList bladexsqlMapper.getUserList();Q&#xff1a;上面两个列表怎么使用流&#…...

编程日记 2023/10/16 17:13:32

开源酒店预订订房小程序源码系统+多元商户 前端+后端完整搭建教程 可二次开发

大家好啊&#xff0c;罗峰今天来给大家分享一款酒店预订订房小程序源码系统&#xff0c;这款系统进行了全新的升级&#xff0c;从原来的单门店升级成了多门店&#xff0c;可以自由切换账号&#xff0c;统一管理。功能强大。以下是部分代码截图&#xff1a; 酒店预订订房小程序源…...

编程日记 2023/10/16 17:12:31

Leetcode 2906. Construct Product Matrix

Leetcode 2906. Construct Product Matrix 1. 解题思路2. 代码实现 题目链接&#xff1a;2906. Construct Product Matrix 1. 解题思路 这道题其实算是一道数论题。 本来其实python的pow内置函数已经帮我们基本处理了所有的问题了&#xff0c;但是这里稍微做了一点复杂化操…...

编程日记 2023/10/16 17:11:28

【Leetcode Sheet】Weekly Practice 11

Leetcode Test 2731 移动机器人(10.10) 有一些机器人分布在一条无限长的数轴上&#xff0c;他们初始坐标用一个下标从 0 开始的整数数组 nums 表示。当你给机器人下达命令时&#xff0c;它们以每秒钟一单位的速度开始移动。 给你一个字符串 s &#xff0c;每个字符按顺序分别…...

编程日记 2023/10/16 17:09:25

本地PHP搭建简单Imagewheel私人云图床，在外远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言、Linux &#x1f325;️每日语录&#xff1a;追逐影子的人&#xff0c;自己就是影子。 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 1.前言 云存储在前几年风头无两&#xff0c;云存…...

编程日记 2023/10/16 17:08:23

Python图像处理进阶：Pillow库的中级应用

在上一篇文章中&#xff0c;我们介绍了Python的Pillow库&#xff0c;了解了如何使用Pillow进行一些基础的图像操作。今天&#xff0c;我们将深入探讨Pillow库的中级功能&#xff0c;包括颜色空间转换&#xff0c;直方图&#xff0c;像素操作和绘制。 一、颜色空间转换 在图像…...

编程日记 2023/10/16 17:06:21

多线程怎么共用一个事务

文章目录 场景分析测试对应的其他类我并没有贴出来,因为大家可以自己找个项目走一波测试testSession测试testTransaction 注意使用同一个sqlsession会导致线程安全问题,testSession方法就是在另外线程里面能读取到数据库里面没有的数据.但是有时候业务就是这么奇怪.扩展总结 场…...

编程日记 2023/10/16 17:05:21

scrollIntoView使用与属性详解

scrollIntoView 使用与属性详解 效果图如下图所示 如果要想让元素滚动到指定位置 window.onload function () {containerItems[6].scrollIntoView({ behavior: "smooth" }); };js 代码 const containerItems document.querySelectorAll(".container div&…...

编程日记 2023/10/16 17:04:19

【LeetCode热题100】--169.多数元素

169.多数元素 使用哈希表&#xff1a; class Solution {public int majorityElement(int[] nums) {int n nums.length;int m n/2;Map<Integer,Integer> map new HashMap<>(); //定义一个hashfor(int num:nums){Integer count map.get(num); //Map.get() 方法…...

编程日记 2023/10/16 17:03:16

LeetCode 面试题 10.01. 合并排序的数组

文章目录 一、题目二、C# 题解 一、题目 给定两个排序后的数组 A 和 B&#xff0c;其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法&#xff0c;将 B 合并入 A 并排序。 初始化 A 和 B 的元素数量分别为 m 和 n。 示例: 输入: A [1,2,3,0,0,0], m 3 B [2,5,6], n 3 输…...

编程日记 2023/10/16 17:02:13

揭秘OLED透明拼接屏的参数规格：分辨率、亮度与透明度全解析

作为一种新型的显示技术&#xff0c;OLED透明拼接屏在市场中正在迅速崭露头角&#xff0c;有很多知名品牌厂家能设计、开发、生产高品质的显示产品。 如尼伽、起鸿、康视界、LG、YCTIMES、腾裕等&#xff0c;这些品牌在显示技术领域拥有丰富的经验和声誉&#xff0c;以其卓越的…...

编程日记 2023/10/16 17:00:11

竞赛选题 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…...

编程日记 2023/10/16 16:59:08

linux U盘无法使用，提示“Partition table entries are not in disk order“

问题&#xff1a; U盘在Windows上使用正常&#xff0c;在linux下无法使用fdisk -l 命令提示&#xff1a;Partition table entries are not in disk order $ fdisk -l Disk /dev/sdb: 525 MB, 525336576 bytes 17 heads, 59 sectors/track, 1022 cylinders Units cyl…...

编程日记 2023/10/16 16:58:06

别再让AI瞎忙活了！用Claude Code的SubAgent打造你的专属开发团队（附React项目实战）

别再让AI瞎忙活了&#xff01;用Claude Code的SubAgent打造你的专属开发团队&#xff08;附React项目实战&#xff09; 在软件开发的世界里&#xff0c;我们常常面临一个困境&#xff1a;要么雇佣一个庞大的团队&#xff0c;每个成员各司其职但成本高昂&#xff1b;要么依赖全能…...

编程新知 2026/3/27 11:25:58

UniApp实战：如何安全高效地在安卓10+设备上实现本地数据存储（附权限配置避坑指南）

UniApp安卓10本地数据存储实战&#xff1a;权限配置与高性能方案设计 当你的UniApp在安卓10设备上突然无法保存用户配置时&#xff0c;控制台那行冰冷的"Permission denied"可能让整个开发团队陷入深夜加班。这不是简单的API调用问题&#xff0c;而是安卓存储机制变革…...

编程新知 2026/3/27 11:25:58

Linux驱动——uart子系统驱动注册分析

韦东山驱动大全uart子系统笔记自整理——08_UART驱动情景分析_注册由于韦东山老师uart子系统的08注册情景分析的笔记很简略&#xff0c;所以在学完这节课后自己整理了一份详细笔记&#xff0c;包含TTY驱动框架&#xff0c;数据结构分析&#xff0c;以及注册过程分析&#xff0c…...

编程新知 2026/3/27 11:07:53

SeqGPT-560M中文理解深度测评：对古汉语、方言、行业黑话的泛化能力分析

SeqGPT-560M中文理解深度测评&#xff1a;对古汉语、方言、行业黑话的泛化能力分析 1. 模型背景与核心能力 SeqGPT-560M是阿里达摩院推出的零样本文本理解模型&#xff0c;专门针对中文场景优化&#xff0c;无需训练即可完成文本分类和信息抽取任务。这个560M参数的轻量级模型…...

编程新知 2026/3/27 10:09:28

MATLAB图像处理实战：用imfindcircles快速定位硬币边缘（附完整代码）

MATLAB图像处理实战&#xff1a;用imfindcircles快速定位硬币边缘&#xff08;附完整代码&#xff09; 在工业检测和医学影像分析中&#xff0c;圆形物体的精准定位往往是关键的第一步。无论是生产线上的硬币质量检查&#xff0c;还是显微镜下的细胞计数&#xff0c;快速准确地…...

编程新知 2026/3/27 9:12:50

vLLM-v0.17.1实操手册：vLLM服务升级策略与滚动更新最佳实践

vLLM-v0.17.1实操手册&#xff1a;vLLM服务升级策略与滚动更新最佳实践 1. vLLM框架概述 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;最新发布的v0.17.1版本带来了多项性能优化和功能增强。这个开源项目最初由加州大学伯克利分校的研究团队开发&am…...

编程新知 2026/3/27 8:34:33

42-西门子1200伺服控制5轴程序 程序采用1200系列PLC，项目实现以下功能： （1）

42-西门子1200伺服控制5轴程序 程序采用1200系列PLC&#xff0c;项目实现以下功能&#xff1a; &#xff08;1&#xff09;.三轴机械手联动取放料PTO脉冲定位控制台达B2伺服 &#xff08;2&#xff09;.台达伺服速度模式应用扭矩模式应用实现收放卷 &#xff08;3&#xff09;.…...

编程新知 2026/3/27 8:32:32

开源工具gInk：高效标注从入门到精通

开源工具gInk&#xff1a;高效标注从入门到精通 【免费下载链接】gInk An easy to use on-screen annotation software inspired by Epic Pen. 项目地址: https://gitcode.com/gh_mirrors/gi/gInk 在数字化协作与远程沟通日益频繁的今天&#xff0c;屏幕标注工具已成为提…...

编程新知 2026/3/27 8:00:20

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测：对比Claude Code的轻量化替代方案

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测&#xff1a;对比Claude Code的轻量化替代方案 1. 评测背景与模型特点 在当今AI辅助编程领域&#xff0c;大型语言模型已经成为开发者日常工作的得力助手。然而&#xff0c;许多高性能模型往往需要云端部署或强大的计算资源&#x…...

编程新知 2026/3/27 7:28:13

静态图训练卡顿、NCCL超时、Graph Break频发？PyTorch 3.0分布式训练高频故障诊断与热修复清单，含12个可复用调试脚本

第一章&#xff1a;PyTorch 3.0静态图分布式训练故障全景认知PyTorch 3.0 引入的静态图编译&#xff08;TorchDynamo Inductor 后端&#xff09;与原生分布式训练&#xff08;如 FSDP、DDP&#xff09;深度耦合后&#xff0c;故障表现呈现多维交织特征&#xff1a;编译期图构建…...

编程新知 2026/3/27 5:16:44