JavaScript 事件
时间：2019-08-20 13:50:44 来源:igfitidea点击:
什么是事件（event）?
发生了某个事情称之为事件
- 当页面加载时，它被称为事件。
- 当用户单击按钮时，该单击也是一个事件。
- 其他例子比如：按下键盘、关闭窗口、调整窗口大小等事件。
JavaScript与HTML的交互是通过用户或浏览器操作页面时发生的事件来处理的。
开发人员可以使用事件来执行JavaScript代码作为响应。
事件是Document Object Model (DOM) Level 3的一部分，每个HTML元素都包含一组可以触发JavaScript代码的事件。
onclick事件类型
这是最常见的事件类型，当用户单击鼠标左键时发生。
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() {
// 这里进行数据校验 根据校验结果返回true或者false
// return true
}
</script>
</head>
<body>
<form method = "POST" onsubmit = "return validate()">
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
onmouseover和onmouseout
- 当我们将鼠标移到任何元素上时，onmouseover事件会触发;
- 当我们将鼠标移出该元素时，onmouseout事件会触发。
<html>
<head>
<script type = "text/javascript">
function over() {
console.log ("鼠标滑过");
}
function out() {
console.log ("鼠标划走");
}
</script>
</head>
<body>
<p>将鼠标画过下面文字，查看效果</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2>鼠标事件</h2>
</div>
</body>
</html>
HTML 5标准事件
下面列出了标准的HTML 5事件:
| 事件 | 说明 |
|---|---|
| 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 | 当媒体停止播放，但预期将恢复时触发 |
