极客教程JavaScript – 事件
什么是事件？
JavaScript 通过事件与 HTML 交互，当用户或浏览器操作页面时，相关的事件就会产生。
当页面加载时，它被称为事件。当用户单击一个按钮时，也是一个事件。其他示例包括按任意键，关闭窗口，调整窗口大小等等。
开发人员可以使用这些事件来执行 JavaScript 编写的响应，例如按钮关闭窗口，向用户显示消息，验证数据以及任何其他可能的响应。
事件是文档对象模型（DOM）级别 3 的一部分，每个 HTML 元素包含一组可以触发 JavaScript 代码的事件。
请通过以下简短教程，更好地了解事件和 JavaScript 之间的关系HTML 事件参考。这里我们将看到几个示例来了解事件和 JavaScript 之间的关系。
onclick 事件类型
这是最常用的事件类型，当用户单击他的鼠标左键时发生，可以在此事件类型中设置验证，警告等操作。
实例
尝试以下实例。
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>单击下面的按钮并查看结果</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() {
验证都写在这里
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "提交" />
</form>
</body>
</html>
onmouseover 和 onmouseout
这两种事件类型将帮助您为图像或文本创建漂亮的效果。当您将鼠标悬停在任何元素上时， onmouseover 事件触发；当您将鼠标移出该元素时， onmouseout 事件触发。尝试以下示例。
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("鼠标悬停");
}
function out() {
document.write ("鼠标移开");
}
//-->
</script>
</head>
<body>
<p>将鼠标移入区域以查看结果：</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> 这是区域内部 </h2>
</div>
</body>
</html>
输出
HTML5标准事件
这里列出了标准的HTML5事件，以供参考。其中script表示要针对该事件执行的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 | 当媒体元素的寻找属性为真且开始寻找时触发 |
| onselect | script | 元素被选中时触发 |
| onstalled | script | 获取媒体数据出错时触发 |
| onstorage | script | 文档加载时触发 |
| onsubmit | script | 当表单提交时触发 |
| onsuspend | script | 当浏览器获取媒体数据但在完全获取媒体文件之前停止时触发 |
| ontimeupdate | script | 媒体更改其播放位置时触发 |
| onundo | script | 文档执行撤销操作时触发 |
| onunload | script | 用户离开文档时触发 |
| onvolumechange | script | 媒体更改音量时触发，也在静音设置下触发 |
| onwaiting | script | 媒体停止播放且预计会继续时触发 |