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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637681.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷(CodeForces)历年愚人节题目,难度普及+/提高,让你怀疑自己智商

INTERCALC 题目描述 DO YOU EXPECT ME TO FIND THIS OUT? WHAT BASE AND/XOR LANGUAGE INCLUDES string? DON’T BYTE OF MORE THAN YOU CAN CHEW YOU CAN ONLY DISTORT THE LARGEST OF MATHEMATICS SO FAR SAYING “ABRACADABRA” WITHOUT A MAGIC AND WON’T DO YOU …

ssh: connect to host github.com port 22: Connection timed out

问题描述 本来好好的git push到GitHub突然有一天会卡住&#xff0c;不报错也不提示超时。 查了各种办法&#xff1a; 从ssh改成https&#xff0c;然后发现2021年8月好像停用了https的访问方式&#xff0c;需要生成口令&#xff0c;感觉太麻烦和奇怪就没有解决了。git remote…

Webpack5入门到原理21:提升开发体验

SourceMap 为什么 开发时我们运行的代码是经过 webpack 编译后的&#xff0c;例如下面这个样子&#xff1a; /** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for product…

更新Ubuntu并同步网络时间

ubuntu环境搭建专栏&#x1f517;点击跳转 Ubuntu系统环境搭建&#xff08;九&#xff09;——更新Ubuntu并同步网络时间 文章目录 Ubuntu系统环境搭建&#xff08;九&#xff09;——更新Ubuntu并同步网络时间1.更新Ubuntu1.1 查看ubuntu版本和详细信息1.2 创建root用户1.3 更…

Webpack5入门到原理19:React 脚手架搭建

开发模式配置 // webpack.dev.js const path require("path"); const ESLintWebpackPlugin require("eslint-webpack-plugin"); const HtmlWebpackPlugin require("html-webpack-plugin"); const ReactRefreshWebpackPlugin require("…

使用 ImportBeanDefinitionRegistrar 向Spring容器中注入Bean

目录 一、如何使用二、优点 一、如何使用 ImportBeanDefinitionRegistrar是Spring提供的一个接口&#xff0c;允许你在运行时动态地注册Bean定义到Spring容器中。通过实现这个接口&#xff0c;你可以在配置类上使用Import注解&#xff0c;并在registerBeanDefinitions方法中自…

蓝桥杯练习题(十二)

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;十二&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他…

黑马程序员-瑞吉外卖-day4

实现账号的启动禁止 EmployeeController PutMappingpublic R<String> update(RequestBody Employee employee){employeeService.updateById(employee);return R.success("员工信息修改成功");} 出错 解决 common目录下 引入JacksonObjectMapper package com…

AI绘画Stable Diffusion进阶使用

本文讲解&#xff0c;模型底模&#xff0c;VAE美化模型&#xff0c;Lora模型&#xff0c;hypernetwork。 文本Stable Diffusion 简称sd 欢迎关注 使用模型 C站&#xff1a;https://civitai.com/ huggingface&#xff1a;https://huggingface.co/models?pipeline_tagtext-to-…

怎么移除WordPress后台工具栏的查看站点子菜单?如何改为一级菜单?

默认情况下&#xff0c;我们在WordPress后台想要访问前端网站&#xff0c;需要将鼠标移动到左上角的站点名称&#xff0c;然后点击下拉菜单中的“查看站点”才行&#xff0c;而且还不是新窗口打开。那么有没有办法将这个“查看站点”子菜单变成一级菜单并显示在顶部管理工具栏中…

Vulnhub靶机:FunBox 2

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox 2&#xff08;10.0.2.27&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://download.vulnhub.com/funbo…

基于Servlet建立表白墙网站

目录 一、设计思想 二、设计表白墙页面&#xff08;前端--VSCode&#xff09; 1、效果图 2、html部分&#xff08;网页上有哪些内容&#xff09; 3、css部分&#xff08;页面内容的具体样式&#xff09; 4、js部分&#xff08;页面行为&#xff09; 三、借助Servlet实现客…

TCP服务器最多支持多少客户端连接

目录 一、理论数值 二、实际部署 参考 一、理论数值 首先知道一个基础概念&#xff0c;对于一个 TCP 连接可以使用四元组&#xff08;src_ip, src_port, dst_ip, dst_port&#xff09;进行唯一标识。因为服务端 IP 和 Port 是固定的&#xff08;如下图中的bind阶段&#xff0…

Python(18)--文件输入/输出 Ⅱ

​ 大家好&#xff01;我是码银&#x1f970; 欢迎关注&#x1f970;&#xff1a; CSDN&#xff1a;码银 公众号&#xff1a;码银学编程 前言 前一篇文章&#xff08;python(17)–文件的输入/输出-CSDN博客&#xff09;介绍了如何操作文本文件和二进制文件&#xff0c;以及对应…

WorkPlus:构建高效协作的企业即时通讯解决方案

在现代企业中&#xff0c;高效沟通是实现协作和改善工作效率的关键。而企业即时通讯工具成为了推进沟通的利器。作为一款高质量的企业即时通讯解决方案&#xff0c;WorkPlus以其卓越的性能和独特的功能&#xff0c;助力企业构建高效协作的新格局。 为什么选择WorkPlus作为企业即…

拉取docker私有仓库镜像报错http: server gave HTTP response to HTTPs client解决办法

docker私有仓库镜像拉取指令 sudo docker pull 10.246.152.91:5000/xxx_image 报错 Error response from daemon Get "https://10.246.152.91:5000/v2/": http: server gave HTTP response to HTTPs client 解决办法 创建文件/etc/docker/daemon.json&#xff0c…

gin中间件篇

1. 全局中间件 所有请求都经过此中间件 package mainimport ("fmt""time""github.com/gin-gonic/gin" )// 定义中间 func MiddleWare() gin.HandlerFunc {return func(c *gin.Context) {t : time.Now()fmt.Println("中间件开始执行了&quo…

数据结构【DS】Ch8 排序

文章目录 插入排序选择排序归并&基数外部排序 插入排序 交换排序 选择排序 归并&基数 外部排序

Macos数据库管理软件:Navicat Premium for Mac 16.3.5中文版

Navicat Premium 16 for Mac是一款强大的数据库管理和开发工具&#xff0c;支持多种数据库系统&#xff0c;如MySQL、Oracle、SQL Server等。它提供了直观的用户界面和丰富的功能&#xff0c;使用户能够轻松地创建、管理和维护数据库。 软件下载&#xff1a;Navicat Premium fo…

NLP论文阅读记录 - 2022 | WOS 04.基于 XAI 的强化学习方法,用于社交物联网内容的文本摘要

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作三.本文方法3.1 总结为两阶段学习3.1.1 基础系统 3.2 重构文本摘要 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 XAI-Base…