标签：
js-事件
一、什么是事件？
javascript创建动态页面。事件是可以被javascript侦测到的行为。网页中的每个元素都可以产生某些可以出发javascript函数或程序的事件。比如说单击鼠标（onclick）事件，鼠标经过（onmouseover）事件……
二、事件列表
| 属性 | 当以下情况发生时，出现此事件 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |
三、常用事件实例
1、单击鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单击鼠标事件</title>
<script type="text/javascript">
function demo(){
alert("hello world");
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我" onclick="demo()" />
</form>
</body>
</html>
2、鼠标经过，鼠标移除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标经过、鼠标移除事件</title>
<style type="text/css">
body{margin: 0px;}
.div{
width: 200px;
height: 200px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div class="div" onmouseover="onOver(this)" onmouseout="onOut(this)">
</div>
<script type="text/javascript">
function onOver(ooj){
ooj.innerHTML="hello";
}
function onOut(iij){
iij.innerHTML="world";
}
</script>
</body>
</html>
3、光标聚集和失焦事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function demo(){
alert("请在此输入姓名！");
}
function demo2(){
alert("请确定输入姓名后，再离开！");
}
</script>
</head>
<body>
<form>
姓名：<input type="text" value="请输入姓名！" onfocus="demo()" onblur="demo2()" />
密码：<input type="password" />
</form>
</body>
</html>
4、文本框选中事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function demo(){
alert("您触发了选中事件！");
}
</script>
</head>
<body>
<form>
姓名：<input type="text" value="请输入姓名！" onselect="demo()" />
密码：<input type="password" />
</form>
</body>
</html>
5、文本框选中事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function demo(){
alert("您改变了文本内容！");
}
</script>
</head>
<body>
<form>
姓名：<input type="text" value="请输入姓名！" onchange="demo()" />
</form>
</body>
</html>
6、加载事件（onload）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function demo(){
alert("加载中，请稍等");
}
</script>
</head>
<body onload="demo()">
欢迎学习javascript
</body>
</html>
7、卸载事件（onunload）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
window.onload = onunload_demo;
function onunload_demo(){
alert("您确定离开网页么？");
}
</script>
</head>
<body>
欢迎学习javascript
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/foodoir/p/5723323.html
