一、什么是事件
事件是可以被JavaScript监测到的行为。
二、主要事件
【1】单击事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<p id="pid">hello</p>
<button id="btn" onclick="hello()">按钮</button>
<script>
function hello(){alert("Hello")}
</script>
</body>
</html>
点击按钮会弹出一个警告框,内容为hello。
【2】鼠标经过事件和鼠标移出事件
实例:
style.css文件内容:
.div{
width: 100px;
height: 100px;
background-color: red;
}
index.html文件内容:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<body>
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOut(x){x.innerHTML = "Hello"}
function onOver(x){x.innerHTML = "World"}
</script>
</body>
</html>
页面加载成功后:
将鼠标移动到红色方框上面:
将鼠标从红色方框上面移走:
【3】文本内容被改变事件
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<form>
<input type="text" onchange="changeDemo()">
</form>
<script>
function changeDemo(){alert("Hello 内容改变了")}
</script>
</body>
</html>
【4】文本框选中事件
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<form>
<input type="text" onselect="onSelect(this)">
</form>
<script>
function onSelect(x){x.style.background="red"}
</script>
</body>
</html>
页面加载成功后:
选中文本框,文本框背景变成了红色:
【5】光标聚集事件
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body>
<form>
<input type="text" onfocus="onFouce(this)">
</form>
<script>
function onFouce(x){x.style.background="green"}
</script>
</body>
</html>
页面加载成功后:
点击文本框后,文本框的背景颜色变成绿色:
【6】移开光标事件
示例代码:
<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名:
<input type="text" id="fname" onblur="upperCase()" />
</body>
</html>
【7】网页加载事件
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Random_w</title>
<head>
<body onload="msg()">
<script>
function msg(){alert("页面加载完成")}
</script>
</body>
</html>
【8】关闭网页事件
示例代码:
<!DOCTYPE html>
<html>
<head>
<script>
function goodbye()
{
alert("感谢您访问");
}
</script>
</head>
<body onunload="goodbye()">
<h1>欢迎访问我的首页</h1>
<p>请关闭窗口,或按 F5 刷新页面。</p>
</body>
</html>