极客教程JavaScript 事件
什么是事件
JavaScript与HTML的交互是通过当用户或浏览器操作页面时发生的事件来处理的。
当页面加载时，被称为一个事件。当用户点击按钮时，点击也是一个事件。其他示例包括按任意键、关闭窗口、调整窗口大小等事件。
开发者可以利用这些事件来执行JavaScript编码的响应，使按钮关闭窗口、向用户显示消息、验证数据等，几乎可以实现任何其他类型的响应。
事件是文档对象模型（DOM）3级的一部分，每个HTML元素都包含一组可以触发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 是在尝试提交表单时发生的事件。您可以在此事件类型中放置您的表单验证。
示例
以下示例演示了如何使用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
这两种事件类型将帮助您创建漂亮的图像效果，甚至以及文本效果。当您将鼠标移到元素上时， 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>
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 | 当鼠标指针移过元素时触发 |
| onmousewheel | script | 当鼠标滚轮被旋转时触发 |
| onoffline | script | 当文档离线时触发 |
| onoine | script | 当文档上线时触发 |
| ononline | script | 当文档上线时触发 |
| onpagehide | script | 当窗口被隐藏时触发 |
| onpageshow | script | 当窗口变为可见时触发 |
| onreadystatechange | script | 当读取状态发生变化时触发 |
| onredo | script | 当文档执行撤销时触发 |
| onresize | script | 当窗口大小被调整时触发 |
| onscroll | script | 当元素的滚动条被滚动时触发 |
| onseeked | script | 当媒体元素的寻找属性不再为true，并且寻找结束时触发 |
| onseeking | script | 当媒体元素的寻找属性为true，并且寻找开始时触发 |
| onselect | script | 当一个元素被选中时触发 |
| onstalled | script | 当在获取媒体数据时发生错误时触发 |
| onstorage | script | 当文档加载时触发 |
| onsubmit | script | 当表单提交时触发 |
| onsuspend | script | 当浏览器在获取媒体数据时已经停止，但在完整获取媒体文件之前触发 |
| ontimeupdate | script | 当媒体播放位置发生变化时触发 |
| onundo | script | 当文档执行撤销操作时触发 |
| onunload | script | 当用户离开文档时触发 |
| onvolumechange | script | 媒体更改音量时触发，也在音量设置为”静音”时触发 |
| onwaiting | script | 媒体停止播放时触发，但预计会继续播放 |