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

JavaScript 中的事件

news 2026/3/29 17:04:34

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

ComfyUI模型管理终极指南：从零基础到高效工作流的完整教程

ComfyUI模型管理终极指南：从零基础到高效工作流的完整教程【免费下载链接】ComfyUI 最强大且模块化的具有图形/节点界面的稳定扩散GUI。项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI ComfyUI作为最强大且模块化的AI图像生成工具，…...

编程新知 2026/3/29 16:16:20

RexUniNLU新手入门指南：3步搞定智能家居、金融、医疗场景意图识别

RexUniNLU新手入门指南：3步搞定智能家居、金融、医疗场景意图识别 1. 认识RexUniNLU：零样本意图识别利器 RexUniNLU是一款基于Siamese-UIE架构的轻量级自然语言理解框架，它能让你无需准备标注数据，仅通过简单的标签定义就能完成…...

编程新知 2026/3/29 15:46:05

出差党/远程办公必备：用OpenWrt软路由打造你的随身‘家庭办公室’（支持Windows远程唤醒与桌面）

移动办公革命：OpenWrt软路由构建高效远程办公系统 1. 现代远程办公的痛点与解决方案作为一名常年奔波于各大城市的咨询顾问，我深刻理解移动办公的痛点：酒店网络不稳定、公共WiFi安全隐患、重要文件无法随时调取、高性能工作站闲置在家...直到…...

编程新知 2026/3/29 15:25:55

Whisper-large-v3开源大模型部署教程：无需Docker，纯Python一键启动方案

Whisper-large-v3开源大模型部署教程：无需Docker，纯Python一键启动方案本文由113小贝基于Whisper-large-v3语音识别模型二次开发构建 1. 项目概述今天要给大家介绍一个超级实用的语音识别工具——基于OpenAI Whisper Large v3的多语言语音识别Web服务…...

编程新知 2026/3/29 15:15:53

在macOS上利用PyInstaller为Windows生成exe文件的3种实用方法

1. 为什么macOS不能直接生成Windows的exe文件？ 很多刚开始接触Python打包的开发者都会遇到一个头疼的问题：明明在macOS上写好的脚本，用PyInstaller打包后却不能在Windows电脑上运行。这其实和PyInstaller的工作原理有关——它需要访问目标平…...

编程新知 2026/3/29 14:35:39

从河南农村到泰国拳台：张家乐在Bangla Boxing Stadium加冕泰拳冠军的荣耀

2017年，泰国普吉岛Bangla Boxing Stadium的聚光灯下，来自中国河南的拳手张家乐高举冠军奖杯，在这片泰拳发源地的擂台上，书写了中国格斗选手的荣耀篇章。这场胜利，不仅是他个人职业生涯的高光时刻，更让世界看…...

编程新知 2026/3/29 14:11:22

handong1587.github.io：深度学习工程师的终极技术资源宝库

handong1587.github.io：深度学习工程师的终极技术资源宝库【免费下载链接】handong1587.github.io 项目地址: https://gitcode.com/gh_mirrors/ha/handong1587.github.io 在当今人工智能和深度学习快速发展的时代，寻找高质量的技术资源变得至关…...

编程新知 2026/3/29 13:53:15

手把手教你解决winget的InternetOpenUrl() failed错误（含GitHub镜像加速）

深度解析winget的InternetOpenUrl() failed错误及高效解决方案当你满怀期待地打开终端，准备用winget快速安装一个开发工具时，突然跳出的"InternetOpenUrl() failed. 0x80072efd"错误提示无疑是一盆冷水。这个看似简单的网络连接问题背后&…...

编程新知 2026/3/29 12:42:14

setup-php 故障排除手册：常见问题解决方案与调试技巧

setup-php 故障排除手册：常见问题解决方案与调试技巧【免费下载链接】setup-php shivammathur/setup-php: 是一个用于安装和配置 PHP 的脚本，可以方便地安装和配置 PHP 环境。适合对 PHP、环境配置和想要实现 PHP 环境配置的开发者。项目地址: https…...

编程新知 2026/3/29 12:36:14

Python AI模型推理慢？3个被90%工程师忽略的代码级优化技巧，立竿见影提升3.2倍吞吐量

第一章：Python AI模型推理慢？3个被90%工程师忽略的代码级优化技巧，立竿见影提升3.2倍吞吐量避免动态类型推断导致的重复开销 Python 的动态类型在模型推理中常引发隐式类型转换和属性查找开销。尤其在循环内调用 model.forward() 时&#xff…...

编程新知 2026/3/29 11:37:26

1、鼠标事件：

鼠标单击事件（click）：

方法一 （on+click）

方法二（利用addEventListener）

方法三:(箭头函数)

鼠标悬停事件（mouseover）：

鼠标移出事件（mouseout）：

鼠标移入事件（mouseenter）：

鼠标移出事件（mouseleave）：

2、键盘事件：

键盘按下事件（keydown）：

键盘松开事件（keyup）：

3、焦点事件：

获取焦点事件（focus）：

失去焦点事件（blur）：

4、表单事件：

表单提交事件（submit）：

常见的表单事件包括：

总结：

相关文章：

方法一（on+click）