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

JavaScript 中的事件

news 2025/10/31 7:45:47

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

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...

编程新知 2025/10/29 23:54:22

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2025/10/21 23:40:19

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2025/10/28 19:03:33

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/10/25 0:12:07

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/10/30 3:32:09

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008：是version产品的大版本。 R006：是release产品特性版本。 C009：是通用版 B0014：是build开发过程中的构建版本2.硬件要求 #安全版和企业版内存：1GB 以上硬盘&#xf…...

编程新知 2025/8/16 12:41:25

【SpringBoot自动化部署】

SpringBoot自动化部署方法使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...

编程新知 2025/10/20 7:16:42

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

1、鼠标事件：

鼠标单击事件（click）：

方法一 （on+click）

方法二（利用addEventListener）

方法三:(箭头函数)

鼠标悬停事件（mouseover）：

鼠标移出事件（mouseout）：

鼠标移入事件（mouseenter）：

鼠标移出事件（mouseleave）：

2、键盘事件：

键盘按下事件（keydown）：

键盘松开事件（keyup）：

3、焦点事件：

获取焦点事件（focus）：

失去焦点事件（blur）：

4、表单事件：

表单提交事件（submit）：

常见的表单事件包括：

总结：

相关文章：

方法一（on+click）