2025.4.22学习日记 JavaScript的常用事件

在 JavaScript 里,事件是在文档或者浏览器窗口中发生的特定交互瞬间,例如点击按钮、页面加载完成等等。下面是一些常用的事件以及案例:

1. click 事件

当用户点击元素时触发

const button = document.createElement('button');
button.textContent = '点击我';
document.body.appendChild(button);button.addEventListener('click', function() {alert('按钮被点击了!');
});

2. mouseover 事件

当鼠标指针移动到元素上方时触发。

const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'blue';
document.body.appendChild(box);box.addEventListener('mouseover', function() {this.style.backgroundColor = 'red';
});

3. mouseout 事件

当鼠标指针移出元素时触发。

const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'blue';
document.body.appendChild(box);box.addEventListener('mouseout', function() {this.style.backgroundColor = 'green';
});

4. keydown 事件

当用户按下键盘上的某个键时触发。

document.addEventListener('keydown', function(event) {console.log(`你按下了 ${event.key} 键`);
});

5. load 事件

当页面或图像等资源加载完成时触发。

<body><img id="myImage" src="https://picsum.photos/200/300" alt="示例图片"><script>const image = document.getElementById('myImage');image.addEventListener('load', function() {console.log('图片加载完成');});</script>
</body>

6. submit 事件

当表单提交时触发。

<body><form id="myForm"><input type="text" name="username"><input type="submit" value="提交"></form><script>const form = document.getElementById('myForm');form.addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为console.log('表单已提交');});</script>
</body>

 

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

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

相关文章

基于 SpringAI 整合 DeepSeek 模型实现 AI 聊天对话

目录 1、Ollama 的下载配置 与 DeepSeek 的本地部署流程 1.1 下载安装 Ollama 1.2 搜索模型并进行本地部署 2、基于 SpringAI 调用 Ollama 模型 2.1 基于OpenAI 的接口规范&#xff08;其他模型基本遵循&#xff09; 2.2 在 IDEA 中进行创建 SpringAI 项目并调用 DS 模型 3、基…

在线查看【免费】 dcm、drawio,dcm wps文件格式网站

可以免费在线查看 .docx/wps/Office/wmf/ psd/ psd/eml/epub/dwg, dxf/ txt/zip, rar/ jpg/mp3 m.gszh.xyz m.gszh.xyz 免费支持以下格式文件在线查看类型 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办…

低光环境下双目云台摄像头监控性能解析

双目云台摄像头在低光环境下的监控效果主要取决于其硬件配置和软件优化能力。以下是对双目云台摄像头在低光环境下监控效果的详细分析&#xff1a; 一、硬件配置对低光监控效果的影响 镜头与焦距 &#xff1a; 双目云台摄像头通常配备超大广角固定镜头和360视角的移动镜头&a…

继承相关知识

概念 定义类时&#xff0c;代码中有共性的成员&#xff0c;还有自己的属性&#xff0c;使用继承可以减少重复的代码&#xff0c; 继承的语法 class 子类&#xff1a;继承方式 父类 继承方式有&#xff1a;public&#xff0c;private&#xff0c;protected 公共继承&#x…

【Python进阶】数据可视化:Matplotlib从入门到实战

Python数据可视化&#xff1a;Matplotlib完全指南 前言技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比 二、实战演示环境配置要求核心代码实现案例1&#xff1a;折线图&#xff08;股票趋势&#…

Java高效合并Excel报表实战:GcExcel让数据处理更简单

前言&#xff1a;为什么需要自动化合并Excel&#xff1f; 在日常办公场景中&#xff0c;Excel报表合并是数据分析的基础操作。根据2023年企业办公效率报告显示&#xff1a; 财务人员平均每周花费6.2小时在Excel合并操作上人工合并的错误率高达15%90%的中大型企业已采用自动化…

Python 列表与元组深度解析:从基础概念到函数实现全攻略

在 Python 编程的广袤天地中&#xff0c;列表&#xff08;List&#xff09;和元组&#xff08;Tuple&#xff09;是两种不可或缺的数据结构。它们如同程序员手中的瑞士军刀&#xff0c;能高效地处理各类数据。从简单的数值存储到复杂的数据组织&#xff0c;列表和元组都发挥着关…

Java中的方法重写(Override)与方法重载(Overload)详解

一、基本概念对比 特性方法重写(Override)方法重载(Overload)定义子类重新定义父类中已有的方法同一个类中多个同名方法&#xff0c;参数不同作用范围继承关系中&#xff08;父子类之间&#xff09;同一个类内方法签名必须相同&#xff08;方法名参数列表&#xff09;必须不同…

发布一个npm包,更新包,删除包

发布一个npm包&#xff0c;更新包&#xff0c;删除包 如何将自己的项目 发布为一个 npm 包&#xff0c;并掌握 更新 和 删除 的操作流程。 &#x1f680; 一、发布一个 npm 包的完整流程 ✅ 1. 注册并登录 npm 账号 如果还没有账号&#xff0c;先注册&#xff1a; 官网注册&…

Linux系统之----进程的概念

1.进程 1.1基本概念 课本概念 &#xff1a;进程是程序的一个执行实例&#xff0c;是正在执行的程序。当程序被执行时&#xff0c;系统会为其创建一个进程&#xff0c;包含程序代码、数据以及运行时所需的资源。 内核观点 &#xff1a;进程是担当分配系统资源&#xff08;CPU…

Shell脚本中的字符串截取和规则变化

文章目录 前言if通配符判断if判断多个条件规则变化字符串的两个示例改变中间段数字改变末尾段数字 总结 前言 科技的发展会带来习惯的改变&#xff0c;特别是对于我们这批敲代码的&#xff0c;之前还积累一些奇巧淫技&#xff0c;想着在必要的时候卖弄一下&#xff0c;自从生成…

c语言修炼秘籍 - - 禁(进)忌(阶)秘(技)术(巧)【第七式】程序的编译

c语言修炼秘籍 - - 禁(进)忌(阶)秘(技)术(巧)【第七式】程序的编译 【心法】 【第零章】c语言概述 【第一章】分支与循环语句 【第二章】函数 【第三章】数组 【第四章】操作符 【第五章】指针 【第六章】结构体 【第七章】const与c语言中一些错误代码 【禁忌秘术】 【第一式】…

Feign 深度解析:Java 声明式 HTTP 客户端的终极指南

Feign 深度解析&#xff1a;Java 声明式 HTTP 客户端的终极指南 Feign 是由 Netflix 开源的 ​声明式 HTTP 客户端&#xff0c;后成为 Spring Cloud 生态的核心组件&#xff08;现由 OpenFeign 维护&#xff09;。它通过注解和接口定义简化了服务间 RESTful 通信&#xff0c;并…

如何Ubuntu 22.04.5 LTS 64 位 操作系统部署运行SLAM3! 详细流程

以下是在本地部署运行 ORB-SLAM3 的详细步骤&#xff0c;基于官方 README.md 和最佳实践整理&#xff0c;适用于 Ubuntu 16.04/18.04/20.04/22.04 系统&#xff1a; 一、系统要求与依赖项安装 1. 基础系统要求 操作系统&#xff1a;Ubuntu 16.04/18.04/20.04/22.04&#xff…

USB 共享神器 VirtualHere 局域网内远程使用打印机与扫描仪

本文首发于只抄博客,欢迎点击原文链接了解更多内容。 前言 很久之前,有分享过使用 CUPS 和路由器来实现局域网内共享打印机,但由于 SANE 支持的打印机较少以及扫描驱动的缺失,试了很多种方法都没有办法成功远程使用打印机的扫描功能。 后面偶然发现 VirtualHere 可以曲线…

一洽智能硬件行业解决方案探索与实践

一、智能硬件行业发展现状剖析 在数字化浪潮推动下&#xff0c;智能硬件行业呈现蓬勃发展态势。软硬件一体化的深度融合&#xff0c;构建起智能化服务的核心架构&#xff0c;而移动应用作为连接用户与设备的重要桥梁&#xff0c;其作用愈发关键。深入研究该行业&#xff0c;可…

【C++ 类和数据抽象】构造函数

目录 一、构造函数的基本概念 1.1 构造函数核心特性 1.2 构造函数的作用 1.3 构造函数类型体系 二、构造函数的类型 2.1 默认构造函数 2.2 带参数的构造函数 2.3 拷贝构造函数 2.4 移动构造函数&#xff08;C11 及以后&#xff09; 三、初始化关键技术 3.1 成员初始…

图数据库nebula测试指南

概述 Nebula是一个开源的分布式图数据库系统&#xff0c;专为处理超大规模关联数据而设计。可以将复杂的关联关系存在nebula图数据库中&#xff0c;提供可视化平台用于案件关联查询及调查。测试的前提是了解nebula图数据库&#xff0c;会使用基本的插入语句和查询语句&#xf…

dispaly: inline-flex 和 display: flex 的区别

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局&#xff08;Flexbox&#xff09;的属性值&#xff0c;但它们之间有一些关键的区别&#xff0c;主要体现在元素如何在页面上被渲染和它们对周围元素的影响。 主要区别 1&#xff0c;块级 vs 行内块级 d…

Sqlserver安全篇之_Sqlcmd命令使用windows域账号认证sqlserver遇到问题如何处理的案例

sqlcmd https://learn.microsoft.com/zh-cn/sql/tools/sqlcmd/sqlcmd-connect-database-engine?viewsql-server-ver16 sqlcmd -S指定的数据库连接字符串必须有对应的有效的SPN信息&#xff0c;否则会报错SSPI Provider: Server not found in Kerberos database. 正常连接 1、…