初学HTML5系列二:HTML5新增的事件属性

Window事件属性: 

属性 描述
onafterprint  script 文档打印之后运行的脚本。 属性发生于用户设置页面打印并且打印对话框已出现之后。
onbeforeprint  script 文档打印之前运行的脚本。属性在用户已设置页面打印之后立即触发,但是在打印对话框出现之前。
onbeforeunload script 文档卸载之前运行的脚本。
onerror script 在错误发生时运行的脚本。
onhaschange script 当文档已改变时运行的脚本。
onmessage script 在消息被触发时运行的脚本。
onoffline script 当文档离线时运行的脚本。
ononline script 当文档上线时运行的脚本。
onpagehide script 当窗口隐藏时运行的脚本。
onpageshow script 当窗口成为可见时运行的脚本。
onpopstate script 当窗口历史记录改变时运行的脚本。
onredo script 当文档执行撤销(redo)时运行的脚本。
onresize script 当浏览器窗口被调整大小时触发。常用于 浏览器窗口被调整尺寸时。
onstorage script 在 Web Storage 区域更新后运行的脚本。
onundo script 在文档执行 undo 时运行的脚本。

    

  

Form事件:

由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):

属性 描述
oncontextmenu script 当上下文菜单被触发时运行的脚本。
onformchange script 在表单改变时运行的脚本。
onforminput script 当表单获得用户输入时运行的脚本。
oninput script 当元素获得用户输入时运行的脚本。
oninvalid script 当元素无效时运行的脚本。
onreset script 当表单中的重置按钮被点击时触发。HTML5 中不支持。

  

Keyboard事件还和之前一样,没有什么变化。

Mouse事件:

由鼠标或类似用户动作触发的事件:

属性 描述
ondrag script 元素被拖动时运行的脚本。
ondragend script 在拖动操作末端运行的脚本。
ondragenter script 当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave script 当元素离开有效拖放目标时运行的脚本。
ondragover script 当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart script 在拖动操作开端运行的脚本。
ondrop script 当被拖元素正在被拖放时运行的脚本。
onmousewheel script 当鼠标滚轮正在被滚动时运行的脚本。
onscroll script 当元素滚动条被滚动时运行的脚本。

Media事件:

由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):

属性 描述
oncanplay script 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange script 当媒介长度改变时运行的脚本。
onemptied script 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended script 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror script 当在文件加载期间发生错误时运行的脚本。
onloadeddata script 当媒介数据已加载时运行的脚本。
onloadedmetadata script 当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart script 在文件开始加载且未实际加载任何数据前运行的脚本。
onpause script 当媒介被用户或程序暂停时运行的脚本。
onplay script 当媒介已就绪可以开始播放时运行的脚本。
onplaying script 当媒介已开始播放时运行的脚本。
onprogress script 当浏览器正在获取媒介数据时运行的脚本。
onratechange script 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange script 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked script 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking script 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled script 在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend script 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate script 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange script 每当音量改变时(包括将音量设置为静音)时运行的脚本。
时间: 2024-07-30 10:17:27

初学HTML5系列二:HTML5新增的事件属性的相关文章

浅谈HTML5之二:新增的元素和废除的元素

新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. HTML5中代码示例:<section>…</section> HTML4中代码示例:<div>…</div> article元素 article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章. HTML5中代码示例:<artic

HTML5系列二(标签元素、FileReader、拖放)

nav元素的使用场合 aside元素的使用场合 aside元素主要有以下两种使用方法: 1.被包含在article中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料.名词解释等 2.在article元素之外使用,作为页面或站点全局的附属信息部分 html5细节概述 1.一个网页内并未限制header元素的个数,可以拥有多个,也可以为每个内容区块加一个header元素(footer同理) 2.autofocus:一个页面上只能有一个控件具有该属性 3.pattern属性:要求输

HTML5系列:HTML5绘图

1. canvas元素基础 canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形. 在页面中使用canvas元素绘制图形需要经过的三个步骤: 步骤一  使用canvas元素创建一个画布区域,并获取该元素. 步骤二  通过获取的canvas元素,取得该图形元素的上下文环境对象. 步骤三  根据取得的上下文环境对象,在页面中绘制图形或动画. 1.1 页面添加canvas元素 <canvas id="cnvMain" width="500" heigh

HTML5系列:HTML5本地存储

1. Web Storage存储 HTML4在客户端存储数据通常使用Cookie存储机制将数据保存在用户的客户端,但使用Cookie方式存储客户端数据存在一系列的制约发展因素,如限制存储数据空间大小.数据安全性差等. HTML5中新增两种数据存储方式:Web Storage和Web SQL Database.前者可用于临时或永久保存客户端的少量数据,后者是客户端本地化的一套数据库系统,可以将大量的数据保存在客户端,而无需与服务器交互. Web Storage页面存储根据Web Storage A

HTML5系列:HTML5与HTML4的区别

1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5中声明方法: <!DOCTYPE html> 1.2 字符编

HTML5系列:HTML5表单

1. input元素新增类型 url类型 url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交. <input type="url" /> email类型 email类型的input元素是用来输入email的文本框,具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址. <input type="email" multiple /> date类型 date类型的i

HTML5之表单新增属性

之前已经接触过的新增属性:autocomplete.autofocus.list.multiple.placeholder.required.min.max.step from属性:将表单外的内容与表单进行关联 <form action="" id="kc" > <input type="text" name="dd" form="kc" >(不再form表单中) novalidat

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定autofocus属性.它以指定属性的方式让元素在页面加载后自动获得焦点.一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效. 这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即

初学HTML5系列三:事件

Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbeforeprint script 文档打印之前运行的脚本. onbeforeunload script 文档卸载之前运行的脚本. onerror script 在错误发生时运行的脚本. onhaschange script 当文档已改变时运行的脚本. onload script 页面结束加载之后触发. onmess