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

JavaScript 中的事件

news 2025/9/14 2:53:33

1、鼠标事件：

鼠标单击事件（click）：

方法一（on+click）

 <button id="btn" onclick="alert('88888')">点击弹框</button>

方法二（利用addEventListener）

document.getElementById("btn").addEventListener('click', function(event) {console.log('鼠标单击了页面');
});

方法三:(箭头函数)

  document.getElementById("btn").onclick = () => { alert('88888')};

鼠标悬停事件（mouseover）：

document.getElementById("name").addEventListener('mouseover', function(event) {console.log('鼠标悬停在页面上');
});

鼠标移出事件（mouseout）：

document.getElementById("name").addEventListener('mouseout', function(event) {console.log('鼠标移出页面了');
});

鼠标移入事件（mouseenter）：
鼠标移出事件（mouseleave）：

2、键盘事件：

键盘按下事件（keydown）：

<body><input type="text" value="" id="name">
</body>
<script>document.getElementById("name").addEventListener("keydown", function (event) {console.log(event.key);if (event.key === "Control") {event.preventDefault(); // 阻止默认行为（例如表单提交）document.getElementById("name").style.color = "blue";}});
</script>

键盘松开事件（keyup）：

<body><input type="text" value="" id="name">
</body>
<script>document.getElementById("name").addEventListener("keyup", function (event) {console.log(event.key);if (event.key === "Control") {event.preventDefault(); // 阻止默认行为（例如表单提交）document.getElementById("name").style.color = "red";}});
</script>//箭头函数document.getElementById("name").onkeyup = () => {console.log(event.key);if (event.key == "p") {event.preventDefault(); // 阻止默认行为（例如表单提交）document.getElementById("name").style.color = "red";}};

3、焦点事件：

获取焦点事件（focus）：

document.getElementById('myInput').addEventListener('focus', function() {console.log('输入框获得了焦点');
});

失去焦点事件（blur）：

document.getElementById('myInput').addEventListener('blur', function() {console.log('输入框失去了焦点');
});

4、表单事件：

表单提交事件（submit）：

<form onsubmit="submitForm(event)"><input type="text" id="name" placeholder="请输入姓名" required><input type="email" id="email" placeholder="请输入邮箱" required><button type="submit">提交</button>
</form><script>
function submitForm(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取表单数据var name = document.getElementById("name").value;var email = document.getElementById("email").value;// 执行数据验证或其他处理if (name !== "" && email !== "") {// 验证通过，执行提交操作或其他逻辑console.log("表单提交成功");} else {// 验证失败，给出提示或执行其他操作console.log("请填写完整的姓名和邮箱");}
}
</script>

常见的表单事件包括：

onsubmit：当表单被提交时触发，可以用于验证表单数据的有效性、进行表单数据的处理或发送表单数据到服务器。
onreset：当表单被重置时触发，可以用于清空表单中的输入内容或执行其他重置操作。
onfocus：当表单元素获得焦点时触发，可以用于在用户输入前提供提示或执行其他操作。
onblur：当表单元素失去焦点时触发，可以用于验证用户输入、执行数据处理或执行其他操作。
onchange：当表单元素的值发生改变时触发，适用于下拉列表、复选框等需要监听选项选择改变的情况。

总结：

在 HTML 元素的事件属性上，需要加on，再加事件名称。
在 JavaScript 中通过事件监听器（addEventListener）或直接赋值事件处理函数时，不需要加on。

JavaScript 中的事件

1、鼠标事件： 鼠标单击事件（click）： 方法一 （onclick） <button id"btn" onclick"alert(88888)">点击弹框</button> 方法二（利用addEventListener）…...

编程日记 2024/1/21 1:31:39

hasattr、getattr、setattr

在Python中，hasattr()、getattr()和setattr()是一组内置函数，用于对对象的属性进行操作和查询。这些函数提供了一种方便的方式来检查对象是否具有特定属性，获取属性的值，以及设置属性的值。 1. hasattr hasattr()函数是一种重要…...

编程日记 2024/1/21 1:30:38

构建高可用消息队列系统 01

构建高可用消息队列系统 01 引言1. RabbitMQ简介介绍1.1 什么是RabbitMQ1.2 RabbitMQ的核心特性1.3 RabbitMQ与AMQP 2.安装RabbitMQ3.消息队列实践总结引言在当今互联网时代，消息队列系统扮演着至关重要的角色，它们被广泛应用于分布式系统、微服务架构…...

编程日记 2024/1/21 1:27:35

十本你不容错过的Docker入门到精通书籍推荐

前言： 最近有许多小伙伴私信让我推荐几本关于Docker学习的书籍，今天花了一下午的时间在网上查阅了一些资料和结合自己平时工作中的一些学习参考资料书籍写下了这篇文章。注意以下书籍都是十分优秀的Docker学习书籍（因此排名不分先后&#xff…...

编程日记 2024/1/21 1:26:34

【AI接口】语音版、文心一言大模型和AI绘图、图片检测API

文章目录一、语音版大模型AI1、接口2、请求参数3、请求参数示例4、接口返回示例二、AI图片鉴黄合规检测API1、接口2、请求参数3、请求参数示例4、接口返回示例5、报错说明6、代码开源三、人工智能AI绘画API1、接口2、请求参数3、请求参数示例4、接口返回示例5、AI绘画成果展…...

编程日记 2024/1/21 1:24:33

VUE 中的 v-for 和 v-if 是否可以共存

VUE 中的 v-for 和 v-if 是否可以共存前言1、面试经2、正确回答3、总结总结： 前言要成功，先发疯，头脑简单往前冲！ 三金四银，金九银十，多学知识，也不能埋头苦干，要成功&#xff0c…...

编程日记 2024/1/21 1:23:32

kubernetes 权限控制

RBAC引入了4个顶级资源对象：Role、ClusterRole：角色，用于指定一组权限；RoleBinding、ClusterRoleBinding：角色绑定，用于将角色（权限）赋予给对象咱们通过Role可以配置命名空间下资源…...

编程日记 2024/1/21 1:20:29

vue中父组件异步传值，渲染问题

vue中父组件异步传值，渲染问题父组件异步传值，子组件渲染不出来。有如下两种解决方法： 1、用v-if解决，当父组件有数据才渲染 <Child v-if"dataList && dataList.length > 0" :data-list"dataLis…...

编程日记 2024/1/21 1:19:28

09前后端分离+SSM整合的小案例

前端的Node 后端的Tomcat，是前端程序的容器。前端的npm 后端的maven 1. 导入前端项目 node版本：16.16.0 配置阿里镜像 npm config set registry https://registry.npmjs.org/ 更新npm版本 npm install -g npm9.6.6 用vscode打开解压后的项目 , 右上角…...

编程日记 2024/1/21 1:17:26

不多说废话直接上代码父组件 // index.jsx/*** description 此ProTable是根据ProComponents里的ProTable模仿封装的简易版本* */ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from react import { Card, Table } from antd import…...

编程日记 2024/1/21 1:15:25

新品发布 | 多通道总线记录仪TLog1004，是你期待的吗？

新品发布 2024年1月12日，同星智能又发布一款多通道 CAN （FD）总线、LIN 总线接口logger设备，此款产品在TLog1002基础上进行了升级，同时内置 3 路数字输入和 2 路数字输出，便于多种信号测量和系统集成。可以满…...

编程日记 2024/1/21 1:11:21

Double数据类型保留3位小数

Double scrapGrn scrapQty * Double.parseDouble(lot.getCnvrsnFctr()) / 1000 ; // 保留3位小数 DecimalFormat decimalFormat new DecimalFormat("#.###"); String scrapGrnStr decimalFormat.format(scrapGrn); 345.12344 处理后为 345.123 34…...

编程日记 2024/1/21 1:07:16

08- OpenCV：形态学操作（膨胀与腐蚀、提取水平与垂直线）

目录前言一、膨胀（Dilation）与腐蚀（Erosion） 二、形态学操作 1、开操作（Opening） 2、闭操作（Closing） 3、形态学梯度（Morphological Gradient） 4、…...

编程日记 2024/1/21 1:05:14

基于JavaWeb+SSM+Vue停车场微信小程序系统的设计和实现

基于JavaWebSSMVue停车场微信小程序系统的设计和实现滑到文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》源码获取滑到文末获取源码 Lun文目录目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关…...

编程日记 2024/1/21 1:02:11

VUE---自定义指令

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能。可分为全局注册与局部注册。全局注册（main.js中注册）： Vue.directive(指令名称,{ bind(ele,binding) {}, // 只执…...

编程日记 2024/1/21 1:01:09

开发安全之：Cross-Site Scripting (XSS) 漏洞

近期，我会结合研发云陆续发布开发安全相关的文章，欢迎大家关注！ Overview echo json_encode($arr)：向一个 Web 浏览器发送了未验证的数据，从而导致该浏览器执行恶意代码。 Details Cross-Site Scripting (XSS) 漏洞…...

编程日记 2024/1/21 1:00:08

代码随想录算法训练营第二十四天| 77. 组合

77.组合 public List<List<Integer>> combine(int n, int k) {if (n < k) {return null;}List<List<Integer>> list new ArrayList<>();List<Integer> path new ArrayList<>();backSource(n, path, list, k);return list;}pu…...

编程日记 2024/1/21 0:58:07

虚拟歌姬学习：DiffSinger，让GitHub下载快的方法！

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam，有时只是慢，但是还是…...

编程日记 2024/1/21 0:56:05

What is `StringEscapeUtils.escapeHtml4` does?

StringEscapeUtils.escapeHtml4 作用是将特殊字符转换为它们对应的HTML实体形式，从而防止这些字符在网页中被解析为HTML标签或脚本，有助于防止跨站脚本攻击（XSS, Cross-Site Scripting） 依赖 <!--org.apache.commons.text.St…...

编程日记 2024/1/21 0:55:04

Dubbo 的心脏：理解和应用多种协议【十三】

欢迎来到我的博客，代码的世界里，每一行都是一个故事 Dubbo 的心脏：理解和应用多种协议【十三】前言<dubbo:protocol> 基础<dubbo:protocol> 的定义和作用微服务中协议的重要性支持的协议类型配置示例配置基本配置参数高级配置选…...

编程日记 2024/1/21 0:51:01

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...

编程新知 2025/9/5 8:48:52

使用LangGraph和LangSmith构建多智能体人工智能系统

现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。在这篇博客〔原作者&a…...

编程新知 2025/9/2 18:20:53

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...

编程新知 2025/9/3 21:36:33

LabVIEW双光子成像系统技术

双光子成像技术的核心特性双光子成像通过双低能量光子协同激发机制，展现出显著的技术优势： 深层组织穿透能力：适用于活体组织深度成像高分辨率观测性能：满足微观结构的精细研究需求低光毒性特点：减少对样本的损伤…...

编程新知 2025/9/9 23:10:12

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读在构建数据库中间件的过程中，可观测性和性能分析是保障系统稳定性与可维护性的核心能力。特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...

编程新知 2025/8/8 6:07:28

tomcat指定使用的jdk版本

说明有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置设置方式找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题：阻塞式模态窗口的缺陷原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/9/12 11:51:18

Sklearn 机器学习缺失值处理获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏：【自动化测试】【测试经验】【人工智能】【Python】使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南在机器学习项目中，数据清…...

编程新知 2025/9/7 8:47:50

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...

编程新知 2025/9/13 11:14:21

Pandas 可视化集成：数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化？ 在数据科学和分析领域，可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具，如 Matplotlib、Seaborn、Plotly 等，但 Pandas 内置的可视化功能因其与数据结…...

编程新知 2025/9/7 8:41:08

1、鼠标事件：

鼠标单击事件（click）：

方法一 （on+click）

方法二（利用addEventListener）

方法三:(箭头函数)

鼠标悬停事件（mouseover）：

鼠标移出事件（mouseout）：

鼠标移入事件（mouseenter）：

鼠标移出事件（mouseleave）：

2、键盘事件：

键盘按下事件（keydown）：

键盘松开事件（keyup）：

3、焦点事件：

获取焦点事件（focus）：

失去焦点事件（blur）：

4、表单事件：

表单提交事件（submit）：

常见的表单事件包括：

总结：

相关文章：

方法一（on+click）