什么是事件?
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 | 脚本 | 当媒体停止播放但有望恢复播放时触发 |
