web前端学习(JavaScript事件处理)

一、什么是事件

事件是可以被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>