JavaScript事件
JavaScript与HTML的交互是通过在用户或浏览器操纵页面时发生的事件来处理的。
页面加载时称为事件。当用户单击一个按钮时,该单击也是一个事件。其他示例包括事件,例如按任意键,关闭窗口,调整窗口大小等。
开发人员可以使用这些事件来执行JavaScript编码的响应,从而导致按钮关闭窗口,向用户显示消息,要验证的数据以及实际上可以想象的任何其他类型的响应。
事件是文档对象模型(DOM)级别3的一部分,每个HTML元素都包含一组可以触发JavaScript代码的事件。
请仔细阅读本小教程,以更好地理解 HTML事件参考 。在这里,我们将看到一些示例来了解Event和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服务器。如果证实()函数返回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>
鼠标悬停和鼠标悬停
这两种事件类型将帮助你用图像甚至文本创建漂亮的效果。这鼠标悬停当你将鼠标移到任何元素上时,事件触发鼠标用完当你将鼠标从该元素移出时触发。请尝试以下示例。
<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>
HTML 5标准事件
此处列出了标准HTML 5事件供你参考。此处的脚本指示针对该事件要执行的Javascript函数。
属性 | 值 | 描述 |
---|---|---|
Offline | script | 在文档离线时触发 |
Onabort | script | 触发中止事件 |
onafterprint | script | 在文档打印后触发 |
onbeforeonload | script | 在文档加载之前触发 |
onbeforeprint | script | 在文档打印之前触发 |
onblur | script | 当窗口失去焦点时触发 |
oncanplay | script | 在媒体可以开始播放但可能需要停止以进行缓冲时触发 |
oncanplaythrough | script | 触发媒体何时可以播放到最后而无需停止缓冲 |
onchange | script | 元素更改时触发 |
onclick | script | 单击鼠标触发 |
oncontextmenu | script | 触发上下文菜单时触发 |
ondblclick | script | 双击鼠标触发 |
ondrag | script | 拖动元素时触发 |
ondragend | script | 在拖动操作结束时触发 |
ondragenter | script | 在将元素拖动到有效放置目标时触发 |
ondragleave | script | 在将元素拖动到有效放置目标上时触发 |
Ondragover | script | 在拖动操作开始时触发 |
ondragstart | script | 在拖动操作开始时触发 |
ondrop | script | 拖放拖动的元素时触发 |
ondurationchange | script | 更改媒体长度时触发 |
onemptied | script | 当媒体资源元素突然变空时触发。 |
onended | script | 媒体用完时触发 |
onerror | script | 发生错误时触发 |
onfocus | script | 窗口聚焦时触发 |
onformchange | script | 表单更改时触发 |
onforminput | script | 在表单获取用户输入时触发 |
onhaschange | script | 在文档更改时触发 |
oninput | script | 在元素获取用户输入时触发 |
oninvalid | script | 元素无效时触发 |
onkeydown | script | 按下按键时触发 |
onkeypress | script | 按下和释放键时触发 |
onkeyup | script | 释放按键时触发 |
onload | script | 加载文档时触发 |
onloadeddata | script | 加载媒体数据时触发 |
onloadedmetadata | script | 加载媒体元素的持续时间和其他媒体数据时触发 |
onloadstart | script | 在浏览器开始加载媒体数据时触发 |
onmessage | script | 触发消息时触发 |
onmousedown | script | 按下鼠标按钮时触发 |
onmousemove | script | 鼠标指针移动时触发 |
onmouseout | script | 当鼠标指针移出元素时触发 |
onmouseover | script | 当鼠标指针移到某个元素上时触发 |
onmouseup | script | 释放鼠标按钮时触发 |
onmousewheel | script | 旋转鼠标滚轮时触发 |
onoffline | script | 在文档离线时触发 |
onoine | script | 在文档联机时触发 |
ononline | script | 在文档联机时触发 |
onpagehide | script | 窗口隐藏时触发 |
onpageshow | script | 窗口可见时触发 |
onpause | script | 媒体数据暂停时触发 |
onplay | script | 在媒体数据开始播放时触发 |
onplaying | script | 在媒体数据开始播放时触发 |
onpopstate | script | 窗口的历史记录更改时触发 |
onprogress | script | 在浏览器获取媒体数据时触发 |
onratechange | script | 媒体数据的播放速度改变时触发 |
onreadystatechange | script | 当就绪状态更改时触发 |
onredo | script | 在文档执行重做时触发 |
onresize | script | 调整窗口大小时触发 |
onscroll | script | 在滚动元素的滚动条时触发 |
onseeked | script | 在媒体元素的搜索属性不再为真且搜索结束时触发 |
onseeking | script | 在媒体元素的搜索属性为true且搜索已开始时触发 |
onselect | script | 在选择元素时触发 |
onstalled | script | 在获取媒体数据时出现错误时触发 |
onstorage | script | 加载文档时触发 |
onsubmit | script | 提交表单时触发 |
onsuspend | script | 在浏览器已获取媒体数据但在获取整个媒体文件之前停止时触发 |
ontimeupdate | script | 媒体改变播放位置时触发 |
onundo | script | 在文档执行撤消时触发 |
onunload | script | 在用户离开文档时触发 |
onvolumechange | script | 当媒体更改音量时触发,也将音量设置为“静音”时触发 |
onwaiting | script | 在媒体停止播放但有望恢复播放时触发 |