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

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

news 2025/7/14 12:18:42

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/7/7 9:53:50

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/7/9 22:10:40

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/11 8:21:46

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/7/8 20:42:45

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/7/11 22:34:49

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/7/12 6:40:57

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/7/14 6:01:18

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/7/12 19:11:17

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/7/12 19:21:46

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/7/14 6:15:48