扫码一下
查看教程更方便
教程 > Javascript 教程 > Javascript 基础
阅读：53
Javascript 事件
JavaScript 与 HTML 的交互是通过用户或浏览器操作页面时发生的事件来处理的。
当页面加载时，它被称为一个事件。当用户单击按钮时，也是一个事件。其他示例包括诸如按下任意键、关闭窗口、调整窗口大小等都是事件。
click事件
这是用户单击鼠标左键时最常用的事件类型。你可以针对此事件类型进行验证、警告等。
<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。这里我们在向网络服务器提交表单数据之前调用了一个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>将你的鼠标箭头移动到下面的元素上，然后再从元素上移开，查看一下结果。</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
HTML 5 标准事件
下面列出了标准 HTML 5 事件供您参考。
| 属性 | 值 | 描述 |
|---|---|---|
| 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 | 当媒体停止播放时触发，但预计会继续播放 |
