前端教程：JavaScript事件
JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理。
当页面加载，这是一个事件。当用户点击一个按钮，这一下，也就是一个事件。事件的另一个例子是类似按下任意键，关闭窗口，调整窗口等。
开发者可以使用这些事件执行JavaScript编码响应，这引起按钮以关闭视窗，消息，以便显示给用户，要验证的数据，以及几乎任何其它类型的响应可以发生的。
事件是文档对象模型(DOM)第3级，每一个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>123456789101112131415复制代码类型：[javascript]
这将产生以下结果，当你点击“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>123456789101112131415161718192021复制代码类型：[javascript]
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>123456789101112131415161718192021复制代码类型：[javascript]
可以使用这两个事件类型改变不同的图像，也可以创建帮助你的用户。
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 | 脚本时释放鼠标按键运行 |
赞 (0)