JavaScript事件

事件是什么 ?

JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理。

当页面加载，这是一个事件。当用户点击一个按钮，这一下，也就是一个事件。事件的另一个例子是类似按下任意键，关闭窗口，调整窗口等。

开发者可以使用这些事件执行JavaScript编码响应，这引起按钮以关闭视窗，消息，以便显示给用户，要验证的数据，以及几乎任何其它类型的响应可以发生的。

事件是文档对象模型(DOM)第3级，每一个HTML元素的一部分有一套可以触发JavaScript代码事件。

请继续通过这个小在线教程更好地理解 HTML事件参考. 在这里，我们将看到一些例子来了解事件和JavaScript之间的关系：

onclick事件类型：

这是当用户点击鼠标左键时发生的最频繁使用的事件类型。可以针对此事件类型把验证信息，警告等显示。

例子：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

这将产生以下结果，当你点击“Hello”按钮，然后会的onclick事件的发生将触发sayHello()函数。

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:

这两个事件类型将帮助创建图片甚至用文字以及不错的效果。当把鼠标在任何元素，当从元素把鼠标移出发生onmouseout事件，移过时发生 onmouseover 事件。

例子：

下面的例子说明，分组反应如下：

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

可以使用这两个事件类型改变不同的图像，也可以创建帮助你的用户。

HTML 4 标准事件

标准的HTML4事件列在这里，供大家参考。下面的脚本显示一个Javascript函数功能以对该事件执行。

Event	Value	描述
onchange	script	脚本运行时的元素改变
onsubmit	script	脚本时提交表单运行
onreset	script	脚本运行时的形式被重置
onselect	script	脚本当选择元素运行
onblur	script	脚本运行时的元素失去焦点
onfocus	script	脚本运行时的元素获得焦点
onkeydown	script	脚本的时候键被按下运行
onkeypress	script	脚本的时候键被按下并释放运行
onkeyup	script	脚本的时候键被释放运行
onclick	script	脚本运行时，用鼠标点击
ondblclick	script	脚本运行时，鼠标双击
onmousedown	script	脚本的时候按下鼠标按钮运行
onmousemove	script	脚本运行时鼠标指针移动
onmouseout	script	脚本运行时鼠标指针移出元素
onmouseover	script	脚本运行时鼠标指针掠过元素
onmouseup	script	脚本时释放鼠标按键运行