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

JavaScript HTML DOM 事件

news 2026/2/8 21:01:19

文章目录

  • 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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

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

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

编程新知 2026/2/8 5:11:39

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2026/1/29 5:39:49

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24