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

js中的常见事件（鼠标事件，键盘事件，表单事件......）

news 2025/10/29 18:03:51

JavaScript中的事件(Event)是指在网页中发生的某些特定操作（例如单击、加载页面等），可以被JavaScript代码捕获和处理。常见的事件有：

  1. 鼠标事件：单击（click）、双击（dblclick）、鼠标移动（mousemove）、鼠标悬停（mouseover）、鼠标离开（mouseout）等。

  2. 键盘事件：按键（keydown）、释放键（keyup）等。

  3. 表单事件：提交表单（submit）、重置表单（reset）、输入（input），改变（change）、获得焦点（focus）、失去焦点（blur）等。

  4. 文档事件：加载完成（load）、窗口大小改变（resize）、关闭页面（unload）等。

通过注册事件监听器（Event Listener），可以为网页元素（例如按钮、链接等）添加事件处理器（Event Handler），当事件发生时，事件处理器会被调用执行相应的代码。

例如，下面的代码使用addEventListener()方法为一个按钮添加单击事件的处理函数：

鼠标事件是最常用的事件，通常我们的前后端交互都是通过点击事件来完成的。

const button = document.querySelector('button');
button.addEventListener('click', function() {console.log('按钮被单击了！');
});

鼠标悬停事件：鼠标悬停时弹出信息提示

<html><body>
//鼠标悬停该按钮时显示提示
<button id="btn">查询</button> //通过span做提示，默认为display：none
<span id="info" style="display:none">一个查询按钮</span></body>
</html><script>var info=document.getElementById("info")var btn =document.getElementById("btn")btn.onmouseover=function(){//鼠标悬停时，提示文字显示出来info.style.display="inline-block"；}btn.onmouseout=function(){//鼠标离开时，提示文字隐藏info.style.display=""；}</script>

本文着重说一下表单时间。

表单事件是指在表单元素中发生的事件，例如提交表单、重置表单、输入等。常用的表单事件有：

  1. submit事件：表单提交时触发。

  2. reset事件：表单重置时触发。

  3. input事件：输入框内容改变时触发。

  4. change事件：表单元素的值发生改变时触发（例如复选框、下拉列表等）。

  5. focus事件：获得焦点时触发（点击输入框：input textarea）；

  6. blur事件：失去焦点时触发（当在输入框中输入文本之后切换至下一个输入框，上面这个就会失去焦点）

这些事件可以通过addEventListener()方法来注册事件监听器，例如：

const form = document.querySelector('form');
const input = document.querySelector('input');form.addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为console.log('表单已提交！')
});input.addEventListener('input', function(event) {console.log('输入框内容已改变：', event.target.value);
});

也可以通过给html标签直接添加事件完成

html：<input type='text' name='username' oninput='changeINfo()' />js:function changeInfo(){//实时显示输入框中的输入字数console.log(document.getElementByName("username")[0].value.length)}

在submit事件的处理函数中，可以使用event对象的preventDefault()方法阻止表单的默认提交行为，从而实现自定义表单行为。在input事件的处理函数中，可以通过event.target.value获取输入框的当前值，并在控制台中输出。

文档事件

我们说一下load事件；load事件是在页面初始化时调用，常用于初始化界面的数据（一个查询列表的初始化显示查询）。

举个例子：

在刚打开界面时给出一个弹出框

<script>window.onload=function(){//这里我们可以初始化查询一个后端数据ajax。。。//也可以在界面刚打开时进行一个操作（打开一个广告界面。。。）//我们拿一个弹出框模拟一下alert("xxx")
}</script>

相关文章：

js中的常见事件（鼠标事件，键盘事件，表单事件......）

JavaScript中的事件(Event)是指在网页中发生的某些特定操作&#xff08;例如单击、加载页面等&#xff09;&#xff0c;可以被JavaScript代码捕获和处理。常见的事件有&#xff1a; 鼠标事件&#xff1a;单击&#xff08;click&#xff09;、双击&#xff08;dblclick&#xff…...

编程日记 2023/8/16 23:57:23

学校如何公布录取情况？源代码公布了

作为一名负责公布学生录取情况的老师&#xff0c;对于录取查询公布工作我们可以按照以下流程来进行公布&#xff1a; 1. 录取结果准备&#xff1a;首先&#xff0c;你需要确保录取结果的准确性和完整性。与招生办公室或相关部门核对录取名单&#xff0c;确保没有遗漏或错误。如…...

编程日记 2023/8/16 23:56:21

JAVA基础知识（一）——Java语言描述、变量和运算符

TOC(Java语言描述、变量和运算符) 一、JAVA语言描述 1.1 java语言描述 JDK、JRE、jVM三者之间的关系&#xff0c;以及JDK、JRE包含的主要结构有哪些&#xff1f; JDKJre java的开发工具&#xff08;javac.exe java.exe javadoc.exe&#xff09; jre jvmjava的核心类库 为什…...

编程日记 2023/8/16 23:55:19

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) …...

编程日记 2023/8/16 23:54:16

冉冉升起的星火，再度升级迎来2.0时代！

文章目录 前言权威性评测结果 星火大模型多模态功能插件功能简历生成文档问答PPT生成 代码能力 福利 前言 前几天从技术群里看到大家都在谈论《人工智能大模型体验报告2.0》里边的内容&#xff0c;抱着好奇和学习的态度把报告看了一遍。看完之后瞬间被里边提到的科大讯飞的星火…...

编程日记 2023/8/16 23:53:15

centos7安装erlang及rabbitMQ

下载前注意事项&#xff1a; 第一&#xff1a;自己的系统版本&#xff0c;centos中uname -a指令可以查看&#xff0c;el8&#xff0c;el7&#xff0c;rabbitMQ的包不一样&#xff01; 第二&#xff1a;根据rabbitMQ中erlang version找到想要下载rabbitMQ对应erlang版本&#x…...

编程日记 2023/8/16 23:52:14

项目介绍：《WeTalk》网页聊天室 — Spring Boot、MyBatis、MySQL和WebSocket的奇妙融合

目录 引言&#xff1a; 前言&#xff1a; 技术栈&#xff1a; 主要功能&#xff1a; 功能详解&#xff1a; 1. 用户注册与登录&#xff1a; 2. 添加好友 3. 实时聊天 4. 消息未读 5. 删除聊天记录 6. 删除好友 未来展望&#xff1a; 项目地址&#xff1a; 结语&am…...

编程日记 2023/8/16 23:51:12

(el-Table)操作(不使用 ts)：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

Ⅰ、Element-plus 提供的 Table 表格组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Table 组件情况&#xff1a; 其一、Element-ui 自提供的 Table 代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环境…...

编程日记 2023/8/16 23:50:10

【JAVA】变量的作用域与生存周期

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言变量的作用域变量的生命周期局部变量全局变量 前言 变量&#xff0c;我们学习过程中逃不掉的知识&#xff0c;无论在哪种语言中我们都需要学会去合理的运用它&#xff0c;今…...

编程日记 2023/8/16 23:49:09

中科亿海微FIFO使用

引言 FPGA&#xff08;现场可编程门阵列&#xff09;是一种可编程逻辑器件&#xff0c;具有灵活性和可重构性&#xff0c;广泛用于数字电路设计和嵌入式系统开发。在FPGA中&#xff0c;FIFO&#xff08;First-In, First-Out&#xff09;是一种常见的存储器结构&#xff0c;用于…...

编程日记 2023/8/16 23:48:08

使用maven打包时如何跳过test，有三种方式

方式一 针对spring项目&#xff1a; <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <configuration> <skipTests>true</skipTests> </configuration> …...

编程日记 2023/8/16 23:47:06

005-Spring 扩展点 ：PostProcess

目录 Spring 扩展点 &#xff1a;PostProcess介绍PostProcess大纲文字明细使用方法示例Autowired 功能实现Resource 功能实现 后记 Spring 扩展点 &#xff1a;PostProcess 介绍 Spring 核心做的事情其实很简单就是&#xff1a;控制反转和依赖注入 也就是把 Class 解析为 Bea…...

编程日记 2023/8/16 23:46:04

MFC中的窗体绘制事件函数：OnCtlColor、OnPaint、OnNcPaint、OnDrawItem、OnEraseBkgnd、OnDraw

文章目录 CWnd::OnCtlColorCWnd::OnPaintCWnd::OnNcPaintCWnd::OnDrawItemCWnd::OnEraseBkgndCWnd::InvalidateRectCView::OnDraw 参考&#xff1a;https://learn.microsoft.com/ CWnd::OnCtlColor 即将绘制子控件时&#xff0c;框架会调用此成员函数。 afx_msg HBRUSH OnCt…...

编程日记 2023/8/16 23:45:03

dialogbot：开箱即用的对话机器人解决方案，涵盖问答型对话、任务型对话和聊天型对话等多种场景，为您提供全方位的对话交互体验。

dialogbot&#xff1a;开箱即用的对话机器人解决方案&#xff0c;涵盖问答型对话、任务型对话和聊天型对话等多种场景&#xff0c;支持网络检索问答、领域知识问答、任务引导问答和闲聊问答&#xff0c;为您提供全方位的对话交互体验。 人机对话系统一直是AI的重要方向&#xf…...

编程日记 2023/8/16 23:44:02

TCP服务器—实现数据通信

目录 前言 1.接口介绍 2.编写服务器 3.编写客户端 4.编译链接 5.测试 6.总结 前言 今天我们要介绍的是使用TCP协议实现数据通信&#xff0c;相比于之前写的UDP服务器实现数据信&#xff0c;在主体逻辑上并没有差别。客户端向服务器发送信息&#xff0c;服务器接受信息并回…...

编程日记 2023/8/16 23:43:01

基于SpringBoot实现MySQL备份与还原

基于SpringBoot实现MySQL备份与还原&#xff0c;需求是在页面上对所有的平台数据执行备份和恢复操作&#xff0c;那么就需要使用代码去调用MySQL备份和恢复的指令&#xff0c;下面是具体实现步骤&#xff1b; MySQL备份表设计 CREATE TABLE IF NOT EXISTS mysql_backups (id …...

编程日记 2023/8/16 23:41:59

【VUE 监听用户滑动】

监听滑动方法 一. touchstart、touchmove、touchend二.v-touch三. 自定义指令 一. touchstart、touchmove、touchend 在 Vue 中监听用户往哪个方向滑动可以通过添加事件监听器&#xff0c;然后在事件回调函数中判断滑动方向。常用的事件监听器有touchstart、touchmove、touche…...

编程日记 2023/8/16 23:40:57

通义大模型：打造更智能、更灵活的自然语言处理技术

大家好&#xff0c;今天我想向大家介绍一款备受瞩目的自然语言处理技术——通义大模型。作为一种基于深度学习的人工智能技术&#xff0c;通义大模型能够模拟人类的思维方式&#xff0c;实现更智能、更灵活的自然语言处理&#xff0c;为我们的生活和工作带来了极大的便利。 在…...

编程日记 2023/8/16 23:39:56

Go 流程控制

if语句使用 package mainimport "fmt"func main() {score : 700if score 700 {fmt.Println("清华")}//if支持一个初始化语句 初始化语句和条件判断用;分割if a : 700; a 700 {fmt.Println("清华")}}清华 清华if_else使用 package mainimpor…...

编程日记 2023/8/16 23:38:55

Python opennsfw/opennsfw2 图片/视频 鉴黄 笔记

nsfw&#xff08; Not Suitable for Work&#xff09;直接翻译就是 工作的时候不适合看&#xff0c;真文雅 nsfw效果&#xff0c;注意底部的分数 大体流程&#xff0c;输入图片/视频&#xff0c;输出0-1之间的数字&#xff0c;一般情况下&#xff0c;Scores < 0.2 认为是非…...

编程日记 2023/8/16 23:37:54

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/10/27 18:41:17

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/7/12 13:46:11

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到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

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/9/3 7:13:34

AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

编程新知 2025/10/28 7:14:48

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/10/19 1:38:36