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

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

news 2026/3/27 15:25:05

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

Qwen3.5-4B-Claude-Opus部署教程：CSDN镜像Web服务7860端口配置详解

Qwen3.5-4B-Claude-Opus部署教程&#xff1a;CSDN镜像Web服务7860端口配置详解 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该版本以…...

编程新知 2026/3/27 14:05:32

LFM2.5-1.2B-Thinking-GGUF开源可部署：自主可控轻量模型替代方案深度评测

LFM2.5-1.2B-Thinking-GGUF开源可部署&#xff1a;自主可控轻量模型替代方案深度评测 1. 模型概述 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。该模型采用GGUF格式存储&#xff0c;配合llama.cpp运行时&#xff0c;能…...

编程新知 2026/3/27 12:02:20

夜间自动化利器：OpenClaw+nanobot定时执行爬虫任务

夜间自动化利器&#xff1a;OpenClawnanobot定时执行爬虫任务 1. 为什么选择OpenClaw做夜间自动化 凌晨三点&#xff0c;我的电脑屏幕突然亮了起来。这不是灵异事件&#xff0c;而是OpenClaw正在执行我预设的爬虫任务——收集行业数据、清洗整理、存入数据库&#xff0c;整个…...

编程新知 2026/3/27 11:50:14

汉语到底比其他语言强在哪？

汉语到底比其他语言强在哪&#xff1f;只要一提起这个话题&#xff0c;弹幕里肯定有朋友要说了&#xff1a;哎呀&#xff0c;英语才是世界语言&#xff0c;汉语不严谨&#xff0c;语言没有高下之分&#xff0c;禁止拉踩。这种论调咱们听了一百年了&#xff0c;甚至不少自己人都…...

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

质子交换膜燃料电池Comsol完整版仿真模型：涵盖两相流非等温雾状流道、液态水相变及扩散项，考...

质子交换膜燃料电池仿真Comsol完整版 虽然氢电发文量多了&#xff0c;但是氢电模型复杂程度和别的领域没法比&#xff0c;两相流非等温的氢燃料电池&#xff0c;跑通的都得好几千的&#xff0c;这个模型的流道和内侧都是多相流&#xff0c;这个里面是雾状流的流道&#xff0c;目…...

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

AntiDupl.NET：数字资产管理师的智能图片去重解决方案

AntiDupl.NET&#xff1a;数字资产管理师的智能图片去重解决方案 【免费下载链接】AntiDupl A program to search similar and defect pictures on the disk 项目地址: https://gitcode.com/gh_mirrors/an/AntiDupl 在当今视觉内容爆炸的时代&#xff0c;无论是专业摄影…...

编程新知 2026/3/27 10:45:49

保姆级教程：用命令行实时监控瑞芯微RK3588的CPU/GPU/NPU负载与温度

嵌入式开发实战&#xff1a;构建RK3588芯片全维度性能监控系统 在边缘计算和AI推理场景中&#xff0c;RK3588作为一款高性能SoC&#xff0c;其复杂的多核架构&#xff08;包括6核CPU、Mali-G610 GPU和6TOPS NPU&#xff09;对系统监控提出了更高要求。本文将手把手教你搭建一个…...

编程新知 2026/3/27 10:25:43

vLLM-v0.17.1惊艳效果：束搜索+并行采样在长文本生成中的稳定性展示

vLLM-v0.17.1惊艳效果&#xff1a;束搜索并行采样在长文本生成中的稳定性展示 1. vLLM框架核心能力概览 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;其最新版本v0.17.1在长文本生成稳定性方面取得了显著突破。这个开源项目最初由加州大学伯克利分校…...

编程新知 2026/3/27 8:24:31

Pixel Fashion Atelier部署教程：Stable Diffusion像素时装生成工作站保姆级安装指南

Pixel Fashion Atelier部署教程&#xff1a;Stable Diffusion像素时装生成工作站保姆级安装指南 1. 项目介绍 Pixel Fashion Atelier&#xff08;像素时装锻造坊&#xff09;是一款基于Stable Diffusion与Anything-v5模型的图像生成工作站。与传统AI工具不同&#xff0c;它采…...

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

RimWorld开局定制利器：EdB Prepare Carefully深度应用指南

RimWorld开局定制利器&#xff1a;EdB Prepare Carefully深度应用指南 【免费下载链接】EdBPrepareCarefully EdB Prepare Carefully, a RimWorld mod 项目地址: https://gitcode.com/gh_mirrors/ed/EdBPrepareCarefully 在RimWorld的殖民挑战中&#xff0c;开局配置往往…...

编程新知 2026/3/27 7:09:33