什么是事件?
HTML 事件是发生在 HTML 元素上的事情,当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
页面加载时称为事件,当用户单击按钮时,该单击也是一个事件,其他示例包括事件,如按任意键,关闭窗口,调整窗口大小等。
点击事件
onclick 这是用户单击鼠标左键时最常使用的事件类型,您可以针对此事件类型进行验证,警告等。
请尝试以下示例。
<html> <head> <script type = "text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <p>Click the following button and see result</p> <form> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </form> </body></html>
运行上面代码输出
提交事件
onsubmit 是您尝试提交表单时发生的事件,您可以针对此事件类型进行表单验证。
以下示例显示如何使用onsubmit,在这里无涯教程在将表单数据提交到Web服务器之前调用 validate()函数。如果 validate()函数返回true,则将提交表单,否则将不提交数据。
<html> <head> <script type = "text/javascript"> <!-- function validation() { all validation goes here ......... return either true or false } //--> </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> ....... <input type = "submit" value = "Submit" /> </form> </body></html>
鼠标移动事件
将鼠标移到任何元素上时会触发onmouseover事件,而将鼠标从该元素上移出时会触发onmouseout事件。 请尝试以下示例。
<html> <head> <script type = "text/javascript"> <!-- function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } //--> </script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div onmouseover = "over()" onmouseout = "out()"> <h2> This is inside the division </h2> </div> </body></html>
运行上面代码输出
_
HTML5 标准事件
_
此处列出了标准HTML 5事件供您参考。这里的script指示针对该事件要执行的Javascript函数。
属性
值
说明
Offline
脚本
文档脱机时触发
Onabort
脚本
中止事件触发
onafterprint
脚本
打印文件后触发
onbeforeonload
脚本
在文档加载之前触发
onbeforeprint
脚本
在文档打印之前触发
onblur
脚本
当窗口失去焦点时触发
oncanplay
脚本
当媒体可以开始播放但可能需要停止缓冲才能触发
oncanplaythrough
脚本
触发何时可以播放完媒体而无需停止缓冲
onchange
脚本
元素更改时触发
onclick
脚本
点击鼠标触发
oncontextmenu
脚本
触发上下文菜单时触发
ondblclick
脚本
双击鼠标触发
ondrag
脚本
拖动元素时触发
ondragend
脚本
拖动操作结束时触发
ondragenter
脚本
将元素拖动到有效放置目标时触发
ondragleave
脚本
将元素拖动到有效放置目标上方时触发
ondragover
脚本
拖动操作开始时触发
ondragstart
脚本
拖动操作开始时触发
ondrop
脚本
在拖放拖动元素时触发
ondurationchange
脚本
更改媒体长度时触发
onemptied
脚本
当媒体资源元素突然变空时触发。
onended
脚本
当媒体用完时触发
onerror
脚本
发生错误时触发
onfocus
脚本
在窗口获得焦点时触发
onformchange
脚本
表单更改时触发
onforminput
脚本
当表单获得用户输入时触发
onhaschange
脚本
文档更改时触发
oninput
脚本
当元素获得用户输入时触发
oninvalid
脚本
当元素无效时触发
onkeydown
脚本
按下键时触发
onkeypress
脚本
按下和释放键时触发
onkeyup
脚本
释放键时触发
onload
脚本
在文档加载时触发
onloadeddata
脚本
在加载媒体数据时触发
onloadedmetadata
脚本
在加载媒体元素的持续时间和其他媒体数据时触发
onloadstart
脚本
在浏览器开始加载媒体数据时触发
onmessage
脚本
触发消息时触发
onmousedown
脚本
按下鼠标按钮时触发
onmousemove
脚本
鼠标指针移动时触发
onmouseout
脚本
当鼠标指针移出元素时触发
onmouseover
脚本
当鼠标指针移到某个元素上时触发
onmouseup
脚本
释放鼠标按钮时触发
onmousewheel
脚本
在旋转鼠标滚轮时触发
onoffline
脚本
文档脱机时触发
onoine
脚本
文档在线时触发
ononline
脚本
文档在线时触发
onpagehide
脚本
隐藏窗口时触发
onpageshow
脚本
在窗口可见时触发
onpause
脚本
在媒体数据暂停时触发
onplay
脚本
当媒体数据开始播放时触发
onplaying
脚本
媒体数据开始播放时触发
onpopstate
脚本
在窗口的历史记录更改时触发
onprogress
脚本
在浏览器获取媒体数据时触发
onratechange
脚本
当媒体数据的播放速度更改时触发
onreadystatechange
脚本
准备状态更改时触发
onredo
脚本
在文档执行重做时触发
onresize
脚本
调整窗口大小时触发
onscroll
脚本
在滚动元素的滚动条时触发
onseeked
脚本
当媒体元素的搜索属性不再为真且搜索结束时触发
onseeking
脚本
在媒体元素的搜索属性为true且搜索已开始时触发
onselect
脚本
在选择元素时触发
onstalled
脚本
在获取媒体数据时出现错误时触发
onstorage
脚本
文档加载时触发
onsubmit
脚本
提交表单时触发
onsuspend
脚本
在浏览器已获取媒体数据但在获取整个媒体文件之前已停止时触发
ontimeupdate
脚本
当媒体更改其播放位置时触发
onundo
脚本
在文档执行撤消操作时触发
onunload
脚本
用户离开文档时触发
onvolumechange
脚本
在媒体更改音量时触发,也在音量设置为"静音"时触发
onwaiting
脚本
当媒体停止播放但有望恢复播放时触发