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

JavaScript HTML DOM 事件

news 2026/3/31 21:38:57

文章目录

  • JavaScript HTML DOM 事件
    • 对事件做出反应
    • HTML 事件属性
    • 使用 HTML DOM 来分配事件
    • onload 和 onunload 事件
    • onchange 事件
    • onmouseover 和 onmouseout 事件
    • onmousedown、onmouseup 以及 onclick 事件

JavaScript HTML DOM 事件

在这里插入图片描述
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

HTML 事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。

向 button 元素分配 onclick 事件：

<button onclick="displayDate()">点这里</button>

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

一个简单的 onmouseover-onmouseout 实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){obj.innerHTML="Thank You"
}
function mOut(obj){obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

相关文章：

JavaScript HTML DOM 事件

文章目录JavaScript HTML DOM 事件对事件做出反应HTML 事件属性使用 HTML DOM 来分配事件onload 和 onunload 事件onchange 事件onmouseover 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做…...

编程日记 2023/5/7 16:40:20

推荐算法——NCF知识总结代码实现

NCF知识总结代码实现1. NeuralCF 模型的结构1.1 回顾CF和MF1.2 NCF 模型结构1.3 NeuralCF 模型的扩展---双塔模型2. NCF代码实现2.1 tensorflow2.2 pytorchNeuralCF&#xff1a;如何用深度学习改造协同过滤&#xff1f; 随着技术的发展&#xff0c;协同过滤相比深度学习模型的…...

编程日记 2023/5/6 18:51:28

redis（4）String字符串

前言 Redis中有5大数据类型&#xff0c;分别是字符串String、列表List、集合Set、哈希Hash、有序集合Zset&#xff0c;本篇介绍Redis的字符串String Redis字符串 String是Redis最基本的类型&#xff0c;你可以理解成与Memcached一模一样的类型&#xff0c;一个key对应一个value…...

编程日记 2023/5/10 0:48:41

session一致性问题

在http访问请求中&#xff0c;web服务器会自动为同一个浏览器的访问用户自动创建唯一的session&#xff0c;提供数据存储功能。最常见的&#xff0c;会把用户的登录信息、用户信息存储在session中&#xff0c;以保持登录状态。只要用户不重启浏览器&#xff0c;每次http短连接请…...

编程日记 2023/5/9 15:04:56

上岸16K，薪资翻倍，在华为外包做测试是一种什么样的体验····

现在回过头看当初的决定&#xff0c;还是正确的&#xff0c;自己转行成功&#xff0c;现在进入了华为外包测试岗&#xff0c;脱离了工厂生活&#xff0c;薪资也翻了一倍不止。 我17年毕业于一个普通二本学校&#xff0c;电子信息工程学院&#xff0c;是一个很不出名的小本科。…...

编程日记 2023/4/27 0:58:47

django项目中如何添加自定义的django command

项目目录 1.我们自己建立的application叫做app&#xff0c;首先在这个app目录下&#xff0c;我们需要新建management目录&#xff0c;这个目录里应该包括&#xff1a;__ init__.py&#xff08;内容为空&#xff0c;用于打包&#xff09;和commands目录&#xff0c;然后在comma…...

编程日记 2023/5/9 12:35:26

【算法基础】哈希表⭐⭐⭐

一、哈希表 散列表（Hash table，也叫哈希表），是根据关键码值(Key value)而直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。 给定表M，存在函数f(key)，对任意…...

编程日记 2023/3/19 3:33:21

基于SpringMVC、Spring、MyBatis开发的校园点餐系统

文章目录 项目介绍主要功能截图：后台登录用户管理商品管理评论管理订单管理角色管理咨询管理前台前台首页我的订单商品详情支付方式选择支付成功页面部分代码展示设计总结项目获取方式🍅 作者主页：Java韩立 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题…...

编程日记 2023/5/10 0:49:24

LeetCode 热题 C++ 148. 排序链表 152. 乘积最大子数组 160. 相交链表

力扣148 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5]示例 3&#x…...

编程日记 2023/5/2 4:13:15

JavaScript 基础【快速掌握知识点】

目录 为什么要学JavaScript? 什么是JavaScript 特点&#xff1a; 组成&#xff1a; JavaScript的基本结构 基本结构 内部引用 外部引用 console对象进行输出 JavaScript核心语法 1、变量声明 2、数据类型 3、运算符 4、条件语句 5、循环语句 6、数组 7…...

编程日记 2023/5/4 6:18:10

基于Frenet优化轨迹的⾃动驾驶动作规划⽅法

动作规划&#xff08;Motion Control&#xff09;在⾃动驾驶汽⻋规划模块的最底层&#xff0c;它负责根据当前配置和⽬标配置⽣成⼀序列的动作&#xff0c;本⽂介绍⼀种基于Frenet坐标系的优化轨迹动作规划⽅法&#xff0c;该⽅法在⾼速情况下的ACC辅助驾驶和⽆⼈驾驶都具有较强…...

编程日记 2023/5/5 10:10:13

Spring(入门)

1. 什么是spring&#xff0c;它能够做什么?2. 什么是控制反转(或依赖注入)3. AOP的关键概念4. 示例 4.1 创建工程4.2 pom文件4.3 spring配置文件4.4 示例代码 4.4.1 示例14.4.2 示例2 &#xff08;abstract&#xff0c;parent示例&#xff09;4.4.3 使用有参数构造方法创建jav…...

编程日记 2023/5/3 7:09:25

2023-02-25力扣每日一题

链接&#xff1a; https://leetcode.cn/problems/minimum-swaps-to-make-strings-equal/ 题意&#xff1a; 给定字符串s1,s2&#xff0c;仅由x,y组成 每次可以在两边各挑一个字符交换 求让s1等于s2的最小步骤 解&#xff1a; 1000啊1000&#xff0c;双指针贪一下就过了 …...

编程日记 2023/5/10 7:05:10

如何外网登录管理云通信短信网关平台？——快解析映射方案

云通信&#xff08;Cloud Communications &#xff09;是基于云计算商业模式应用的通信平台服务&#xff0c;简单易用,满足企业一键群发场景,支持多种语言SDK和API 接入。各个通信平台软件都集中在云端&#xff0c;且互通兼容&#xff0c;用户只要登录云通信平台&#xff0c;不…...

编程日记 2023/5/6 18:52:49

学习 Python 之 Pygame 开发魂斗罗（三）

学习 Python 之 Pygame 开发魂斗罗&#xff08;三&#xff09;继续编写魂斗罗1. 角色站立2. 角色移动3. 角色跳跃4. 角色下落继续编写魂斗罗 在上次的博客学习 Python 之 Pygame 开发魂斗罗&#xff08;二&#xff09;中&#xff0c;我们完成了角色的创建和更新&#xff0c;现…...

编程日记 2023/5/10 6:35:58

【华为OD机试模拟题】用 C++ 实现 - 最多获得的短信条数（2023.Q1）

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 分积木（2023.Q1） 【华为OD机试模拟题】用 C++ 实现 - 吃火锅（2023.Q1） 【华为OD机试模拟题】用 C++ 实现 - RSA 加密算法（2023.Q1） 【华为OD机试模拟题】用 C++ 实现 - 构成的正方形数量（2023.Q1） 【华为OD机试模拟…...

编程日记 2023/5/6 18:54:34

linux系统加exfat驱动

u盘假如是fat格式不支持大于4G文件&#xff0c;所以一般u盘用exfat格式&#xff0c;兼容性更好 有的老linux没支持exfat格式&#xff0c;那就自己装个驱动吧 sudo apt-get install exfat-fuse exfat-utils 有一台fedora27需要yum安装&#xff0c;国外源比较慢&#xff0c;改…...

编程日记 2023/5/9 15:38:58

3,预初始化(一）(大象无形9.2)

正如书中所说&#xff0c;预初始化流程由FEngineLoop::PreInit()所实现 主要处理流程 1&#xff0c;设置路径&#xff1a;当前程序路径&#xff0c;当前工作目录路径&#xff0c;游戏的工程路径 2,设置标准输出&#xff1a;设置GLog系统输出的设备&#xff0c;是输出到命令行…...

编程日记 2023/5/9 2:10:34

【PAT甲级题解记录】1013 Battle Over Cities (25 分)

【PAT甲级题解记录】1013 Battle Over Cities (25 分) 前言 Problem&#xff1a;1013 Battle Over Cities (25 分) Tags&#xff1a;DFS 连通图 Difficulty&#xff1a;剧情模式 想流点汗 想流点血 死而无憾 Address&#xff1a;1013 Battle Over Cities (25 分) 问题描述 给…...

编程日记 2023/5/2 4:31:08

CSS-关键帧动画

animation和transition的区别 相同点：都是随时间改变元素的属性值 不同点：transition需要触发一个时间（hover或者click事件）才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也是可以显示的随时间变化来改变元素的css属性值，从而达到一种动画的效果，cs…...

编程日记 2023/5/10 1:23:04

Java 25 FFI与C++ ABI不兼容？GCC 13/Clang 18符号修饰差异导致段错误的逆向工程溯源（含LLVM IR级对比图）

第一章&#xff1a;Java 25 FFI与C ABI不兼容问题的现场复现与现象确认Java 25 引入的 Foreign Function & Memory API&#xff08;FFI&#xff09;在调用 C 原生函数时&#xff0c;因 C ABI&#xff08;Application Binary Interface&#xff09;未被标准化支持&#xff0…...

编程新知 2026/3/31 21:18:57

洛雪音乐音源项目终极指南：如何免费获取全网高品质音乐资源

洛雪音乐音源项目终极指南&#xff1a;如何免费获取全网高品质音乐资源 【免费下载链接】lxmusic- lxmusic(洛雪音乐)全网最新最全音源 项目地址: https://gitcode.com/gh_mirrors/lx/lxmusic- 你是否曾为寻找免费的高品质音乐资源而烦恼&#xff1f;或者厌倦了在多个音…...

编程新知 2026/3/31 20:58:34

无需安装jupyter notebook，在快马平台5分钟搭建你的第一个数据分析原型

今天想和大家分享一个快速搭建数据分析原型的经验。作为一个经常需要验证想法的数据分析师&#xff0c;最头疼的就是每次换电脑或重装系统后配置Jupyter Notebook环境的过程。最近发现了一个超省心的解决方案&#xff0c;不用本地安装就能直接开搞数据分析。 为什么选择云端Ju…...

编程新知 2026/3/31 20:46:17

HPKM-PINN：KAN-MLP并行混合物理信息神经网络技术 第1章 KAN基础与MLP局限的理论分析（二）

脚本 2.1.2.2：激活函数选择——Tanh 与 SwiGLU 在物理约束中的适应性 涉及内容：对比分析 Tanh 与 SwiGLU 激活函数在物理信息神经网络中的适应性，验证不同物理约束（如边界条件、守恒律）下的数值稳定性。 使用方式：运行脚本生成激活函数特性对比、物理约束满足度分析及梯…...

编程新知 2026/3/31 20:29:58

HiveWE：革新性地图编辑引擎助力魔兽争霸III创作者实现效率飞跃

HiveWE&#xff1a;革新性地图编辑引擎助力魔兽争霸III创作者实现效率飞跃 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 在魔兽争霸III地图开发领域&#xff0c;创作者长期面临着传统编辑器性能瓶颈与操作…...

编程新知 2026/3/31 19:47:29

Phi-3-mini-4k-instruct-gguf效果展示：q4量化下保持语义准确性的中文生成实录

Phi-3-mini-4k-instruct-gguf效果展示&#xff1a;q4量化下保持语义准确性的中文生成实录 1. 轻量级文本生成新选择 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;专为问答、文本改写、摘要整理和简短创作等场景优化。这个经过q4量…...

编程新知 2026/3/31 19:29:09

Ubuntu 22.04下用mingw-w64交叉编译Windows程序的完整指南（附CMake配置）

Ubuntu 22.04下用mingw-w64交叉编译Windows程序的完整指南&#xff08;附CMake配置&#xff09; 在跨平台开发领域&#xff0c;能够从Linux系统生成Windows可执行文件是一项极具实用价值的技能。对于使用Ubuntu 22.04 LTS的开发者来说&#xff0c;mingw-w64工具链提供了稳定高…...

编程新知 2026/3/31 19:25:03

Qwen3-14B推理速度实测：10核CPU+24GB显存下首token延迟＜800ms

Qwen3-14B推理速度实测&#xff1a;10核CPU24GB显存下首token延迟<800ms 1. 测试环境与配置 1.1 硬件配置 本次测试使用的硬件配置完全匹配Qwen3-14B私有部署镜像的推荐规格&#xff1a; GPU&#xff1a;RTX 4090D 24GB显存&#xff08;NVIDIA驱动550.90.07&#xff09;…...

编程新知 2026/3/31 19:10:41

探索基于V2G技术的电动汽车车载充放电机Matlab仿真模型

基于V2G技术的电动汽车车载充放电机matlab仿真模型最近在研究电动汽车相关技术&#xff0c;V2G&#xff08;Vehicle-to-Grid&#xff09;技术特别吸引我。V2G技术允许电动汽车与电网进行双向能量交换&#xff0c;简单来说&#xff0c;电动汽车不仅能从电网充电&#xff0c;还能…...

编程新知 2026/3/31 19:00:21

如何3步搭建AI驱动的多智能体股票分析平台？TradingAgents-CN全指南

如何3步搭建AI驱动的多智能体股票分析平台&#xff1f;TradingAgents-CN全指南 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN 面对复杂多变的金…...

编程新知 2026/3/31 18:32:07