HTML有哪些事件属性?

html事件属性有:onblur、onerror、onfocus、onsubmit、onkeydown、onkeypress、onclick、ondblclick、onmousedown、onmousemove、onmouseout等等。

HTML有哪些事件属性?

HTML事件属性

Window 事件属性

针对 window 对象触发的事件。

适用于

标签:

立即学习“前端免费学习笔记(深入)”;

属性 值 描述

onafterprintscript在打印文档之后运行脚本onbeforeprintscript在文档打印之前运行脚本onbeforeonloadscript在文档加载之前运行脚本onblurscript当窗口失去焦点时运行脚本onerrorscript当错误发生时运行脚本onfocusscript当窗口获得焦点时运行脚本onhaschangescript当文档改变时运行脚本onloadscript当文档加载时运行脚本onmessagescript当触发消息时运行脚本onofflinescript当文档离线时运行脚本ononlinescript当文档上线时运行脚本onpagehidescript当窗口隐藏时运行脚本onpageshowscript当窗口可见时运行脚本onpopstatescript当窗口历史记录改变时运行脚本onredoscript当文档执行再执行操作(redo)时运行脚本onresizescript当调整窗口大小时运行脚本onstoragescript当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本onundoscript当文档执行撤销时运行脚本onunloadscript当用户离开文档时运行脚本

表单事件

由 HTML 表单内部的动作触发的事件。

适用于所有 HTML 5 元素,不过最常用于表单元素中:

属性 值 描述

onblurscript当元素失去焦点时运行脚本onchangescript当元素改变时运行脚本oncontextmenuscript当触发上下文菜单时运行脚本onfocusscript当元素获得焦点时运行脚本onformchangescript当表单改变时运行脚本onforminputscript当表单获得用户输入时运行脚本oninputscript当元素获得用户输入时运行脚本oninvalidscript当元素无效时运行脚本onresetscript当表单重置时运行脚本。HTML 5 不支持。onselectscript当选取元素时运行脚本onsubmitscript当提交表单时运行脚本

键盘事件

由键盘触发的事件。

适用于所有 HTML 5 元素:

属性 值 描述

onkeydownscript当按下按键时运行脚本onkeypressscript当按下并松开按键时运行脚本onkeyupscript当松开按键时运行脚本

鼠标事件 

由鼠标或相似的用户动作触发的事件。

适用于所有 HTML 5 元素:

属性 值 描述

onclickscript当单击鼠标时运行脚本ondblclickscript当双击鼠标时运行脚本ondragscript当拖动元素时运行脚本ondragendscript当拖动操作结束时运行脚本ondragenterscript当元素被拖动至有效的拖放目标时运行脚本ondragleavescript当元素离开有效拖放目标时运行脚本ondragoverscript当元素被拖动至有效拖放目标上方时运行脚本ondragstartscript当拖动操作开始时运行脚本ondropscript当被拖动元素正在被拖放时运行脚本onmousedownscript当按下鼠标按钮时运行脚本onmousemovescript当鼠标指针移动时运行脚本onmouseoutscript当鼠标指针移出元素时运行脚本onmouseoverscript当鼠标指针移至元素之上时运行脚本onmouseupscript当松开鼠标按钮时运行脚本onmousewheelscript当转动鼠标滚轮时运行脚本onscrollscript当滚动元素的滚动条时运行脚本

多媒体事件

由视频、图像以及音频等媒介触发的事件。

适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio、embed、img、object 以及 video)中最常用:

属性 值 描述

onabortscript当发生中止事件时运行脚本oncanplayscript当媒介能够开始播放但可能因缓冲而需要停止时运行脚本oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本ondurationchangescript当媒介长度改变时运行脚本onemptiedscript当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本onendedscript当媒介已抵达结尾时运行脚本onerrorscript当在元素加载期间发生错误时运行脚本onloadeddatascript当加载媒介数据时运行脚本onloadedmetadatascript当媒介元素的持续时间以及其他媒介数据已加载时运行脚本onloadstartscript当浏览器开始加载媒介数据时运行脚本onpausescript当媒介数据暂停时运行脚本onplayscript当媒介数据将要开始播放时运行脚本onplayingscript当媒介数据已开始播放时运行脚本onprogressscript当浏览器正在取媒介数据时运行脚本onratechangescript当媒介数据的播放速率改变时运行脚本onreadystatechangescript当就绪状态(ready-state)改变时运行脚本onseekedscript当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本onseekingscript当媒介元素的定位属性为真且定位已开始时运行脚本onstalledscript当取回媒介数据过程中(延迟)存在错误时运行脚本onsuspendscript当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本ontimeupdatescript当媒介改变其播放位置时运行脚本onvolumechangescript当媒介改变音量亦或当音量被设置为静音时运行脚本onwaitingscript当媒介已停止播放但打算继续播放时运行脚本

其他事件

属性 值 描述

onshowscript

元素在上下文显示时触发

ontogglescript当用户打开或关闭

元素时触发

更多编程相关知识,请访问:编程课程!!

以上就是HTML有哪些事件属性?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1548692.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 20:07:20
下一篇 2025年12月21日 20:07:33

相关推荐

  • 了解浏览器渲染网页的每个步骤机制!

    我的想法:如果我要构建快速可靠的网站,需要真正了解浏览器渲染网页的每个步骤机制,这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。 好了,废话不多说,我们开始吧。这个过程可以分为以下几个主要阶段: 1、开始解析HTML 2、获取外部资源 3、解析 CSS 并…

    2025年12月21日 好文分享
    000
  • html是网页文件吗

    html是网页文件,Html文件就是平时我们所说的静态网页文件,是以“.html”或“.htm”扩展名结尾的文件;是直接通过浏览器就能打开浏览的超文本文件。 该方法适用于所有品牌电脑 Html文件就是平时我们所说的静态网页文件,是以“.html”或“.htm”扩展名结尾的文件;是直接通过浏览器就能打…

    2025年12月21日
    000
  • html如何实现点击链接打开一个新窗口

    html实现点击链接打开一个新窗口的方法:可以通过使用a标签的target属性来实现,如【target=”_blank”】。target属性规定了在何处打开链接文档,_blank表示在新窗口中打开链接文档。 本教程操作环境:windows10系统、html5版,该方法适用于所…

    2025年12月21日
    000
  • html获取javascript变量值的方法有哪些

    html获取javascript变量值有如下三种方法: (免费学习视频分享:html视频教程) 方法一:嵌入到html句子中,当html元素使用 var df=newDate(); var year= df.getFullYear() ; document.write(“”+year+” J2EE开…

    2025年12月21日
    000
  • html最外层元素是什么?

    html最外层元素是“html”标签元素,也称为根元素,是所有其他HTML元素(除了“”标签)的容器。“”与“”标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。 相关推荐:《编程视频课程》 html> 标签告知浏览器这是一个 HTML 文档。 标签是 HTML 文档中最外层的元素…

    2025年12月21日
    000
  • html字体大小怎么设置

    设置html字体大小的方法:1、【font-size】后面加px值的方式;2、使用inherit继承父元素的字体大小;3、设置固定的几个值;4、设置smaller和larger;5、设置百分比的形式。 本教程操作环境:windows10系统、html5版,DELL G3电脑,该方法适用于所有品牌电脑…

    2025年12月21日 好文分享
    000
  • html使用什么来描述网页?

    html使用“标记标签”来描述网页。html(超文本标记语言)是一种用于创建网页的标准标记语言,它包括一系列标记标签,通过这些标签可以将影像、声音、图片、文字动画、影视等内容显示出来。 html使用“标记标签”来描述网页。 HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标…

    2025年12月21日
    000
  • 利用html制作简单的个人简历

    我们先来看一下实现效果: (学习视频分享:html视频教程) html代码: 立即学习“前端免费学习笔记(深入)”; 006.btbg{ text-align:center; } 个人简历 姓名 性别 出生日期 照片 民族 政治面貌 婚姻状况 现所在地 籍贯 学历 毕业学校 专业 学习经历 起止年月…

    2025年12月21日
    000
  • HTML中什么是内联元素?

    在HTML中,内联元素是指display属性为inline的元素;内联元素也叫行内元素,在网页中总是随着文字流出现在“行内”,这些元素不会在它本身之前或之后生成“分隔符”,所以可以出现在另一个元素的内容中,而不会破坏其显示。 (推荐教程:html教程) 根据CSS规范的规定,每一个网页元素都有一个d…

    2025年12月21日
    000
  • 浅谈网页中提升SVG文件可访问性的几种方法

    (推荐教程:html教程) SVG是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。本文就来为大家介绍7个提升网页SVG文件可访问性的方案。 1、作为图片使用的 SVG 文件 如果你的 SVG 是作为  的 src 引入的,务必为  添加 r…

    2025年12月21日
    000
  • html input是什么

    在HTML中,input是一个输入框标签,用于指定用户可以在其中输入数据的输入字段;输入字段可通过多种方式改变,取决于标签内的type属性,例“”就是定义一个单行的文本字段。 (推荐教程:html教程) HTML 标签 标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变,取决于 …

    2025年12月21日
    000
  • 怎么在html中插入视频和音频

    插入视频的理想解决方法: HTML5 + + @@@###@@@ (视频教程推荐:html视频教程) 代码如下: @@@###@@@ 插入音频的理想解决方法: 立即学习“前端免费学习笔记(深入)”; @@@###@@@ 下面的例子使用了两个不同的音频格式。Html5  元素会尝试以 mp3 或 og…

    2025年12月21日
    000
  • 利用html+css+js实现简单的点赞效果

    我们在浏览其他网站的文章时,经常可以看到文章尾部有点赞收藏效果,非常有趣。今天我们自己动手来实现该效果。 (学习视频推荐:html视频教程) css样式 .like{ font-size:66px; color:#ccc; cursor:pointer;}.cs{color:#f00;} html内…

    2025年12月21日
    000
  • HTML页面的基本代码结构是什么?

    (推荐教程:html教程) HTML页面的基本代码结构 标题内容 这些由(左尖角号)、内容以及>(右尖角号)组成的叫做标签(tag),三者缺一不可。在 HTML 中,使用包围标签的目的是方便将它们与普通文本进行区分。 上述代码描述的是 HTML 的基本结构,主要使用了 、>、、 以及 等…

    2025年12月21日 好文分享
    000
  • HTML中必须掌握的知识点有哪些

    你是如何理解 HTML 语义化的? 学习视频分享:html视频教程 让页面内容结构化,它有如下优点 1、易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 立即学习“前端免费学习笔记(深入)”; 2、有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 3、方便其他设备解析,如盲人阅读器…

    2025年12月21日
    000
  • HTML网页自动跳转的5种方法

    (推荐教程:html教程) 在我们进行网站创建时经常会遇到需要进行网页跳转的情况,本文就来为大家介绍五种网页自动跳转的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 网页自动跳转5种方法: 第一种网页自动跳转方法:meta refresh自动跳转法 立即学习“前端免费学习笔记…

    2025年12月21日
    000
  • html是一种页面什么型语言?

    html是一种页面“描述”型语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 (推荐教程:html教程) html是一种页面“描述”型语言。 HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标…

    2025年12月21日
    000
  • 一起了解script标签中的async和defer属性

    前端当然要从 HTML 开始,我们来聊聊在 script 标签中加上 async/defer 时的功能及差异。 都明白的道理 我们都知道,浏览器解析 HTML 是一行一行按照顺序向后读取的,在传统的写法中,当浏览器读到 时,便会暂停解析 DOM,同时立即开始下载 中定义的资源,并在下载完成后立刻执行…

    2025年12月21日
    000
  • 怎么在html中实现图片超链接

    在html中实现图片超链接的方法:可以通过将图像元素嵌套在a元素中,使其成为一个链接,如【】。 目的: 对整个一幅图像文件设置超链接 思路: 可以通过将图像元素嵌套在a元素中使其变为一个链接。 立即学习“前端免费学习笔记(深入)”; (学习视频推荐:html视频教程) 语法: @@##@@ 举例: …

    2025年12月21日
    000
  • HTML hr是什么意思

    HTML hr是用于在页面中创建一条水平线的一种标签,在HTML中,标签没有结束标签,其使用语法如“这是段落这是段落”。 推荐:《HTML视频教程》 HTML 标签 定义和用法 标签在 HTML 页面中创建一条水平线。 立即学习“前端免费学习笔记(深入)”; 水平分隔线(horizontal rul…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信