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

JavaScript 中的事件

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>

 

常见的表单事件包括:

  1. onsubmit:当表单被提交时触发,可以用于验证表单数据的有效性、进行表单数据的处理或发送表单数据到服务器。

  2. onreset:当表单被重置时触发,可以用于清空表单中的输入内容或执行其他重置操作。

  3. onfocus:当表单元素获得焦点时触发,可以用于在用户输入前提供提示或执行其他操作。

  4. onblur:当表单元素失去焦点时触发,可以用于验证用户输入、执行数据处理或执行其他操作。

  5. onchange:当表单元素的值发生改变时触发,适用于下拉列表、复选框等需要监听选项选择改变的情况。

总结: 

  • 在 HTML 元素的事件属性上,需要加on,再加事件名称。
  • 在 JavaScript 中通过事件监听器(addEventListener)或直接赋值事件处理函数时,不需要加on

相关文章:

JavaScript 中的事件

1、鼠标事件&#xff1a; 鼠标单击事件&#xff08;click&#xff09;&#xff1a; 方法一 &#xff08;onclick&#xff09; <button id"btn" onclick"alert(88888)">点击弹框</button> 方法二&#xff08;利用addEventListener&#xff09;…...

hasattr、getattr、setattr

在Python中&#xff0c;hasattr()、getattr()和setattr()是一组内置函数&#xff0c;用于对对象的属性进行操作和查询。这些函数提供了一种方便的方式来检查对象是否具有特定属性&#xff0c;获取属性的值&#xff0c;以及设置属性的值。 1. hasattr hasattr()函数是一种重要…...

构建高可用消息队列系统 01

构建高可用消息队列系统 01 引言1. RabbitMQ简介介绍1.1 什么是RabbitMQ1.2 RabbitMQ的核心特性1.3 RabbitMQ与AMQP 2.安装RabbitMQ3.消息队列实践总结 引言 在当今互联网时代&#xff0c;消息队列系统扮演着至关重要的角色&#xff0c;它们被广泛应用于分布式系统、微服务架构…...

十本你不容错过的Docker入门到精通书籍推荐

前言&#xff1a; 最近有许多小伙伴私信让我推荐几本关于Docker学习的书籍&#xff0c;今天花了一下午的时间在网上查阅了一些资料和结合自己平时工作中的一些学习参考资料书籍写下了这篇文章。注意以下书籍都是十分优秀的Docker学习书籍&#xff08;因此排名不分先后&#xff…...

【AI接口】语音版、文心一言大模型和AI绘图、图片检测API

文章目录 一、语音版大模型AI1、接口2、请求参数3、请求参数示例4、接口返回示例 二、AI图片鉴黄合规检测API1、接口2、请求参数3、请求参数示例4、接口返回示例5、报错说明6、代码开源 三、人工智能AI绘画API1、接口2、请求参数3、请求参数示例4、接口返回示例5、AI绘画成果展…...

VUE 中的 v-for 和 v-if 是否可以共存

VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结&#xff1a; 前言 要成功&#xff0c;先发疯&#xff0c;头脑简单往前冲&#xff01; 三金四银&#xff0c;金九银十&#xff0c;多学知识&#xff0c;也不能埋头苦干&#xff0c;要成功&#xff0c…...

kubernetes 权限控制

RBAC引入了4个顶级资源对象&#xff1a;Role、ClusterRole&#xff1a;角色&#xff0c;用于指定一组权限&#xff1b;RoleBinding、ClusterRoleBinding&#xff1a;角色绑定&#xff0c;用于将角色&#xff08;权限&#xff09;赋予给对象 咱们通过Role可以配置命名空间下资源…...

vue中父组件异步传值,渲染问题

vue中父组件异步传值&#xff0c;渲染问题 父组件异步传值&#xff0c;子组件渲染不出来。有如下两种解决方法&#xff1a; 1、用v-if解决&#xff0c;当父组件有数据才渲染 <Child v-if"dataList && dataList.length > 0" :data-list"dataLis…...

09前后端分离+SSM整合的小案例

前端的Node 后端的Tomcat&#xff0c;是前端程序的容器。前端的npm 后端的maven 1. 导入前端项目 node版本&#xff1a;16.16.0 配置阿里镜像 npm config set registry https://registry.npmjs.org/ 更新npm版本 npm install -g npm9.6.6 用vscode打开解压后的项目 , 右上角…...

模仿ProTable创建ProTable组件

不多说废话直接上代码 父组件 // index.jsx/*** description 此ProTable是根据ProComponents里的ProTable模仿封装的简易版本* */ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from react import { Card, Table } from antd import…...

新品发布 | 多通道总线记录仪TLog1004,是你期待的吗?

新品发布 2024年1月12日&#xff0c;同星智能又发布一款多通道 CAN &#xff08;FD&#xff09;总线、LIN 总线接口logger设备&#xff0c;此款产品在TLog1002基础上进行了升级&#xff0c;同时内置 3 路数字输入和 2 路数字输出&#xff0c;便于多种信号测量和系统集成。可以满…...

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…...

08- OpenCV:形态学操作(膨胀与腐蚀 、提取水平与垂直线)

目录 前言 一、膨胀&#xff08;Dilation&#xff09;与 腐蚀&#xff08;Erosion&#xff09; 二、形态学操作 1、开操作&#xff08;Opening&#xff09; 2、闭操作&#xff08;Closing&#xff09; 3、形态学梯度&#xff08;Morphological Gradient&#xff09; 4、…...

基于JavaWeb+SSM+Vue停车场微信小程序系统的设计和实现

基于JavaWebSSMVue停车场微信小程序系统的设计和实现 滑到文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 滑到文末获取源码 Lun文目录 目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关…...

VUE---自定义指令

自定义指令&#xff1a;自己定义的指令&#xff0c;可以封装一些dom操作&#xff0c;扩展额外功能。可分为全局注册与 局部注册。 全局注册&#xff08;main.js中注册&#xff09;&#xff1a; Vue.directive(指令名称,{ bind(ele,binding) {}, // 只执…...

开发安全之:Cross-Site Scripting (XSS) 漏洞

近期&#xff0c;我会结合研发云陆续发布开发安全相关的文章&#xff0c;欢迎大家关注&#xff01; Overview echo json_encode($arr)&#xff1a;向一个 Web 浏览器发送了未验证的数据&#xff0c;从而导致该浏览器执行恶意代码。 Details Cross-Site Scripting (XSS) 漏洞…...

代码随想录算法训练营第二十四天| 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…...

虚拟歌姬学习:DiffSinger,让GitHub下载快的方法!

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam&#xff0c;有时只是慢&#xff0c;但是还是…...

What is `StringEscapeUtils.escapeHtml4` does?

StringEscapeUtils.escapeHtml4 作用是将特殊字符转换为它们对应的HTML实体形式&#xff0c;从而防止这些字符在网页中被解析为HTML标签或脚本&#xff0c;有助于防止跨站脚本攻击&#xff08;XSS, Cross-Site Scripting&#xff09; 依赖 <!--org.apache.commons.text.St…...

Dubbo 的心脏:理解和应用多种协议【十三】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Dubbo 的心脏&#xff1a;理解和应用多种协议【十三】 前言<dubbo:protocol> 基础<dubbo:protocol> 的定义和作用微服务中协议的重要性支持的协议类型配置示例 配置基本配置参数高级配置选…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...