一七五、HTML 不同类型的事件及其说明和示例

HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。

Window 事件

1. onresize

当浏览器窗口的大小发生变化时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onresize Example</title><script>window.onresize = function() {console.log("Window resized");};</script>
</head>
<body><h1>Resize the window and check the console</h1>
</body>
</html>
2. onredo

触发 redo 操作时触发(通常与 document.execCommand() 相关)。

<!-- Example with redo event -->
<button onclick="document.execCommand('redo')">Redo</button>
3. onundo

触发 undo 操作时触发。

<!-- Example with undo event -->
<button onclick="document.execCommand('undo')">Undo</button>
4. onload

页面加载完成时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload Example</title><script>window.onload = function() {alert("Page is fully loaded");};</script>
</head>
<body><h1>onload Example</h1>
</body>
</html>
5. onunload

页面即将卸载时触发。

<script>window.onunload = function() {alert("You are leaving the page!");};
</script>
6. onbeforeunload

页面卸载前触发,通常用于警告用户有未保存的工作。

<script>window.onbeforeunload = function() {return "Are you sure you want to leave?";};
</script>
7. onerror

当页面发生错误时触发。

<script>window.onerror = function(message, source, lineno, colno, error) {console.error(`Error occurred: ${message}`);};
</script>
8. onhaschange

当浏览器历史记录发生变化时触发。

<script>window.onhashchange = function() {console.log("Hash changed: " + location.hash);};
</script>
9. onpopstate

浏览器历史记录状态更改时触发。

<script>window.onpopstate = function(event) {console.log("State: " + event.state);};
</script>
10. onstorage

当发生 localStorage 或 sessionStorage 的修改时触发。

<script>window.onstorage = function(event) {console.log("Storage changed: " + event.key + " " + event.newValue);};
</script>
11. onmessage

当接收到来自另一个窗口或 iframe 的消息时触发。

<script>window.onmessage = function(event) {console.log("Message received: " + event.data);};
</script>
12. onpagehide

当页面隐藏时触发,通常是离开页面或切换标签页时。

<script>window.onpagehide = function() {console.log("Page is hidden");};
</script>
13. onpageshow

当页面显示时触发,通常是通过页面加载或恢复时。

<script>window.onpageshow = function() {console.log("Page is shown");};
</script>
14. ononline

当浏览器连接到网络时触发。

<script>window.ononline = function() {console.log("You are online");};
</script>
15. onoffline

当浏览器断开网络连接时触发。

<script>window.onoffline = function() {console.log("You are offline");};
</script>
16. onafterprint

页面打印完成后触发。

<script>window.onafterprint = function() {console.log("Printing finished");};
</script>
17. onbeforeprint

页面打印之前触发。

<script>window.onbeforeprint = function() {console.log("Before printing");};
</script>

Form 事件

1. oninput

输入字段的值发生变化时触发。

<input type="text" oninput="console.log('Input changed!')">
2. onselect

用户选中输入字段的文本时触发。

<input type="text" onselect="alert('Text selected')">
3. onchange

表单元素的值发生变化时触发。

<select onchange="alert('Selection changed')"><option>Option 1</option><option>Option 2</option>
</select>
4. onfocus

当表单元素获得焦点时触发。

<input type="text" onfocus="console.log('Input focused')">
5. onblur

当表单元素失去焦点时触发。

<input type="text" onblur="console.log('Input lost focus')">
6. onsubmit

表单提交时触发。

<form onsubmit="alert('Form submitted')"><input type="submit" value="Submit">
</form>
7. onreset

当表单重置时触发。

<form onreset="alert('Form reset')"><input type="reset" value="Reset">
</form>
8. onformchange

表单的任何内容发生变化时触发。

<form onformchange="console.log('Form content changed')"><input type="text">
</form>
9. onforminput

当表单内容输入时触发。

<form onforminput="console.log('Form input changed')"><input type="text">
</form>
10. oninvalid

表单验证失败时触发。

<input type="email" oninvalid="alert('Invalid input')">

Keyboard 事件

1. onkeydown

键盘按下时触发。

<input type="text" onkeydown="console.log('Key pressed')">
2. onkeypress

键盘按下并触发时(此事件已被弃用,推荐使用 onkeydown)。

<input type="text" onkeypress="console.log('Key pressed')">
3. onkeyup

键盘松开时触发。

<input type="text" onkeyup="console.log('Key released')">

Mouse 事件

1. onclick

鼠标单击时触发。

<button onclick="alert('Button clicked')">Click me</button>
2. ondblclick

鼠标双击时触发。

<button ondblclick="alert('Button double-clicked')">Double click me</button>
3. oncontextmenu

鼠标右键点击时触发。

<button oncontextmenu="alert('Right-clicked')">Right-click me</button>
4. onscroll

当页面滚动时触发。

<script>window.onscroll = function() {console.log("Scrolled");};
</script>
5. onmousewheel

当鼠标滚轮滚动时触发。

<script>window.onmousewheel = function() {console.log("Mouse wheel scrolled");};
</script>
6. onmousedown

鼠标按下时触发。

<button onmousedown="alert('Mouse button pressed')">Mouse down</button>
7. onmousemove

鼠标移动时触发。

<script>window.onmousemove = function(event) {console.log(`Mouse moved: ${event.clientX}, ${event.clientY}`);};
</script>
8. onmouseout

鼠标移出元素时触发。

<button onmouseout="alert('Mouse out')">Mouse out</button>
9. onmouseover

鼠标悬停在元素上时触发。

<button onmouseover="alert('Mouse over')">Mouse over</button>
10. onmouseup

鼠标释放时触发。

<button onmouseup="alert('Mouse button released')">Mouse up</button>

Drag 事件

1. ondrag

当元素被拖动时触发。

<div draggable="true" ondrag="alert('Element is being dragged')">Drag me</div>
2. ondragend

拖动操作结束时触发。

<div draggable="true" ondragend="alert('Drag ended')">Drag me</div>
3. ondragenter

拖动元素进入目标区域时触发。

<div ondragenter="alert('Dragged element entered target')">Drop here</div>
4. ondragleave

拖动元素离开目标区域时触发。

<div ondragleave="alert('Dragged element left target')">Drop here</div>
5. ondragover

当拖动元素在目标区域上方时触发。

<div ondragover="alert('Element is over target')">Drop here</div>
6. ondragstart

拖动开始时触发。

<div draggable="true" ondragstart="alert('Drag started')">Drag me</div>
7. ondrop

当元素被放置到目标区域时触发。

<div ondrop="alert('Element dropped')">Drop here</div>

Media 事件

1. onplay

当媒体播放时触发。

<video onplay="console.log('Video started playing')" controls><source src="video.mp4" type="video/mp4">
</video>
2. onplaying

媒体开始播放时触发。

<video onplaying="console.log('Video is playing')" controls><source src="video.mp4" type="video/mp4">
</video>
3. onpause

媒体暂停时触发。

<video onpause="console.log('Video paused')" controls><source src="video.mp4" type="video/mp4">
</video>
4. onprogress

媒体加载进度发生变化时触发。

<video onprogress="console.log('Progress made')" controls><source src="video.mp4" type="video/mp4">
</video>
5. onerror

媒体加载或播放错误时触发。

<video onerror="console.log('Error loading video')" controls><source src="invalid-video.mp4" type="video/mp4">
</video>
6. onabort

媒体加载被中止时触发。

<video onabort="console.log('Media loading aborted')" controls><source src="video.mp4" type="video/mp4">
</video>
7. onwaiting

媒体等待数据时触发。

<video onwaiting="console.log('Waiting for media data')" controls><source src="video.mp4" type="video/mp4">
</video>
8. oncanplay

媒体可以播放时触发。

<video oncanplay="console.log('Video can play')" controls><source src="video.mp4" type="video/mp4">
</video>
9. oncanplaythrough

媒体可以播放完整时触发。

<video oncanplaythrough="console.log('Video can play through')" controls><source src="video.mp4" type="video/mp4">
</video>
10. ondurationchange

媒体持续时间发生变化时触发。

<video ondurationchange="console.log('Duration changed')" controls><source src="video.mp4" type="video/mp4">
</video>
11. onemptied

媒体数据丢失时触发。

<video onemptied="console.log('Media data emptied')" controls><source src="video.mp4" type="video/mp4">
</video>
12. onended

媒体播放完毕时触发。

<video onended="console.log('Video ended')" controls><source src="video.mp4" type="video/mp4">
</video>
13. onloadeddata

当媒体数据加载时触发。

<video onloadeddata="console.log('Video data loaded')" controls><source src="video.mp4" type="video/mp4">
</video>
14. onloadedmetadata

当媒体元数据加载时触发。

<video onloadedmetadata="console.log('Video metadata loaded')" controls><source src="video.mp4" type="video/mp4">
</video>
15. onloadstart

媒体加载开始时触发。

<video onloadstart="console.log('Video loading started')" controls><source src="video.mp4" type="video/mp4">
</video>
16. onratechange

播放速率发生变化时触发。

<video onratechange="console.log('Rate changed')" controls><source src="video.mp4" type="video/mp4">
</video>
17. onreadystatechange

读取媒体数据状态时触发。

<video onreadystatechange="console.log('Ready state changed')" controls><source src="video.mp4" type="video/mp4">
</video>
18. onseeked

媒体定位完成时触发。

<video onseeked="console.log('Seek completed')" controls><source src="video.mp4" type="video/mp4">
</video>
19. onseeking

媒体定位时触发。

<video onseeking="console.log('Seeking media')" controls><source src="video.mp4" type="video/mp4">
</video>
20. onstalled

媒体下载缓慢时触发。

<video onstalled="console.log('Stalled during download')" controls><source src="video.mp4" type="video/mp4">
</video>
21. onsuspend

媒体暂停下载时触发。

<video onsuspend="console.log('Download suspended')" controls><source src="video.mp4" type="video/mp4">
</video>
22. ontimeupdate

媒体时间更新时触发。

<video ontimeupdate="console.log('Time updated')" controls><source src="video.mp4" type="video/mp4">
</video>
23. onvolumechange

媒体音量发生变化时触发。

<video onvolumechange="console.log('Volume changed')" controls><source src="video.mp4" type="video/mp4">
</video>

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

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

相关文章

从本地到云端:Linux上快速搭建Cloudreve云盘并实现远程管理

文章目录 前言1. 安装Docker2. 使用Docker拉取镜像3. 创建并启动Cloudreve容器4. 本地访问测试5. 公网远程访问本地Cloudreve5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 大家好&#xff01;今天我们要聊聊如何在Linux系统上&#xff0c;…

如何简化App Store提现?——作为游戏开发者的跨境收款体验分享

目录 如何简化App Store提现&#xff1f;——作为游戏开发者的跨境收款体验分享跨境收款常见的几个问题使用万里汇收款后的体验1. 结算流程简单&#xff0c;到账更快2. 多场景收付更灵活3. 多种支付方式支持 使用后的效果&#xff1a;资金管理更高效个人建议 如何简化App Store…

JavaScript void 运算符

void定义&#xff1a; void 运算符对给定的表达式进行求值&#xff0c;然后返回undefined。void是一个一元运算符&#xff0c;接受单个操作数&#xff0c;可以是任何类型&#xff0c;返回一个 undefined。 void语法&#xff1a; void 在表达式的左边&#xff0c;void 右边的…

Apache DolphinScheduler + OceanBase,搭建分布式大数据调度平台的实践

本文整理自白鲸开源联合创始人&#xff0c;Apache DolphinScheduler PMC Chair&#xff0c;Apache Foundation Member 代立冬的演讲。主要介绍了DolphinScheduler及其架构、DolphinScheduler与OceanBase 的联合大数据方案。 DolphinScheduler是什么&#xff1f; Apache Dolph…

Java字符串深度解析:String的实现、常量池与性能优化

引言 在Java编程中&#xff0c;字符串操作是最常见的任务之一。String 类在 Java 中有着独特的实现和特性&#xff0c;理解其背后的原理对于编写高效、安全的代码至关重要。本文将深入探讨 String 的实现机制、字符串常量池、不可变性的优点&#xff0c;以及 String、StringBu…

快速上手vue3+js+Node.js

安装Navicat Premium Navicat Premium 创建一个空的文件夹&#xff08;用于配置node&#xff09; 生成pakeage.json文件 npm init -y 操作mysql npm i mysql2.18.1 安装express搭建web服务器 npm i express4.17.1安装cors解决跨域问题 npm i cors2.8.5创建app.js con…

《瀚文欣赏的宋词集》

长安诗社-梁瀚文,会将自己喜欢的宋词(不限宋代、包含部分元曲)进行整理,有喜欢的词友,可以一起赏析,目前收录约118阙,持续收集中。 《江城子西城杨柳弄春柔》 宋.秦观 西城杨柳弄春柔。动离忧。 泪难收。犹记多情,曾为系归舟。 碧野朱桥当日事,人不见,水空流。 …

Mac上的免费压缩软件-FastZip使用体验实测

FastZip是Mac上的一款免费的压缩软件&#xff0c;分享一下我在日常使用中的体验 压缩格式支持7Z、Zip&#xff0c;解压支持7Z、ZIP、RAR、TAR、GZIP、BZIP2、XZ、LZIP、ACE、ISO、CAB、PAX、JAR、AR、CPIO等所有常见格式的解压 体验使用下来能满足我所有的压缩与解压的需求&a…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习&#xff1a;伦理与社会影响的深度剖析 一、深度学习的伦理挑战 &#xff08;一&#xff09;数据隐私之忧 深度学习模型的训练往往需要大量数据&#xff0c;而数据的收集过程可能会侵犯个人隐私。例如&#xff0c;据统计&#xff0c;面部识别技术在全球范围内每天会收…

vue3展示pag格式动态图

提示&#xff1a;如果是webpack环境的&#xff0c;参考&#xff1a;Pag格式在vue3中的简单使用方法_pag文件-CSDN博客 下面展示的是在vite环境下配置pag 1、安装libpag npm i libpag --save 2、安装rollup-plugin-copy npm i rollup-plugin-copy --save 3、封装pag组件 下…

【ubuntu18.04】使用U盘制作ubuntu18.04启动盘操作说明

打开show application 打开Startup Disk 选择镜像 双击选择ubuntu的iso镜像 镜像下载地址 Ubuntu 18.04.6 LTS (Bionic Beaver) 制作镜像 注意&#xff1a; 制作镜像会格式化U盘&#xff0c;记得备份资料 点击Make Startup Disk,弹出如下对话框 点击Yes 输入管理员密码&a…

django的models使用介绍。

from django.db import modelsfrom utils.models import CommonModel# Create your models here. class User(CommonModel):#用户数据模型username models.CharField(用户名,max_length32, uniqueTrue)password models.CharField(密码,max_length256)nickname models.CharFi…

iOS开发 swift系列---一个视图数据修改后,如何刷新另外一个视图

题目提及的需求源于这样一个场景,我想在B视图修改一个参数,希望在A视图的界面自动刷新并显示修改的结果。这种跨视图的实时更新可能有很多方法解决,本文采用在ContentView 引入一个参数viewmodel ,在B视图修改数据后发送通知,在A视图 onReceive接收通知, 达到修改内容窗口…

Mysql基础 01 数据与sql

文章目录 一、基本概念二、mysql的常用命令三、sql规范四、数据类型五、SQL语句 一、基本概念 数据库(database,DB)&#xff1a;存储数据的仓库。 数据库管理系统软件(Database Management System,DBMS)&#xff1a;是一种操作和管理数据库的大型软件。常见的DBMS有oracle、s…

go语言中的结构体含义和用法详解

在Go语言中,结构体(struct)是一种聚合数据类型,可以将多个不同类型的数据组合成一个更复杂的类型。结构体类似于面向对象编程中的“类”,但是Go语言没有类和继承的概念,而是通过结构体和接口实现面向对象编程的特性。 1. 结构体的定义 结构体是一组字段(field)的集合…

Remix部署智能合约时报错:Gas estimation failed

1、在Remix部署智能合约时报错如下&#xff1a; 2、这时候即使发送交易&#xff0c;也无法部署 3、后来看到有人建议说调整一下GAS LIMIT&#xff0c;调整到30000000也不行&#xff0c;甚至当调整到6000000以后连交易记录都没有了 4、最终解决办法&#xff1a;Remix 和 Ganache…

QDateTime 使用

QDateTime 是 Qt 框架中用于处理日期和时间的类。本篇文章详细介绍、通过示例 快速了解QDateTime的各种操作&#xff0c;包括: 当前时间、获取日期和时间、获取日期、获取时间、获取时间戳、格式化输出、年、月、日、QTime时间、获取微妙、操作日期和时间、添加时间、减去时间、…

随机采样之接受拒绝采样

之前提到的逆变换采样&#xff08;Inverse Transform Sampling&#xff09;是一种生成随机样本的方法&#xff0c;它利用累积分布函数&#xff08;CDF&#xff09;的逆函数来生成具有特定分布的随机变量。以下是逆变换采样的缺点&#xff1a; 计算复杂性&#xff1a;对于某些分…

用 Python 爬取淘宝商品价格信息时需要注意什么?

用 Python 爬取淘宝商品价格信息时&#xff0c;需要注意以下方面&#xff1a; 一、法律和道德规范&#xff1a; 遵守法律法规&#xff1a;网络爬虫的行为应在法律允许的范围内进行。未经淘宝平台授权&#xff0c;大规模地爬取其商品价格信息并用于商业盈利等不当用途是违法的…

免费数据集网站

1、DataSearch https://datasetsearch.research.google.comhttp://DataSearch 2、FindData findata-科学数据搜索引擎https://www.findata.cn/ 3、Kaggle Kaggle: Your Machine Learning and Data Science CommunityKaggle is the world’s largest data science community …