JS入门到精通 第9章 事件处理
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通过按钮变换背景颜色</title>...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过按钮变换背景颜色</title>
</head>
<body>
<script type="text/javascript">
var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
var n=0;
function turncolors(){
n++;
if (n==(Arraycolor.length-1)) n=0;
document.bgColor = Arraycolor[n];
}
</script>
<p>
<input type="button" name="Submit" value="变换背景" onclick="turncolors()">
</p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_1/
（3）Tips
.bgcolor。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用事件制作超链接文本</title>
</head>
<body>
<p id="p1" style="color:#AA9900; cursor:pointer" onmousedown="mousedown()" onmouseup="mouseup()"><u>零基础学JavaScript</u></p>
<script type="text/javascript">
function mousedown(){
var obj=document.getElementById("p1");
obj.style.color='#0022AA';
}
function mouseup(){
var obj=document.getElementById('p1');//获取包含文本的元素
obj.style.color='#AA9900';//将文本恢复为原来的颜色
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_2/
（3）Tips
简单的动起来。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入移出时改变图片透明度</title>
</head>
<body>
<script type="text/javascript">
function visible(cursor,i){ //定义visible()函数
if (i==0) //如果参数i的值为0
cursor.style.opacity=1; //将图片不透明度设置为1
else
cursor.style.opacity=0.5;//将图片不透明度设置为0.5
}
</script>
<img src="images/Temp.jpg" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" />
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_3/
（3）Tips
真的这么简单？
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示鼠标在页面中的当前位置</title>
</head>
<body>
<script type="text/javascript">
var x=0,y=0; //初始化变量的值
function MousePlace(event){
x=event.x; //获取横坐标X的值
y=event.y; //获取纵坐标Y的值
document.getElementById('position').innerHTML="鼠标在页面中的当前位置的横坐标X："+x+" 纵坐标Y："+y;
}
document.onmousemove=MousePlace;
</script>
<span id="position"></span>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_4/
（3）Tips
让浏览器自动监听。
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按A键对页面进行刷新</title>
</head>
<body>
<script type="text/javascript">
function Refurbish(event){//定义Refurbish()函数
if (event.keyCode==75){//K键
location.reload();
}
}
document.onkeydown=Refurbish;//当按下键盘上的按键时调用函数
</script>
<img src="1.jpg" width="805" height="554">
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_5/
（3）Tips
event.keyCode，location.reload()。
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>限制文本框的输入</title>
<style>
body{font-size:12px}
</style>
</head>
<body>
<table width="650" height="34" border="0" cellpadding="0" cellspacing="0" background="images/top_03.jpg" bgcolor="#B3CAEE">
<tr>
<td height="22"><span>====== 用户注册信息 ======</span></td>
</tr>
</table>
<table width="650" height="205" border="0" cellpadding="-2" cellspacing="-2">
<tr valign="top">
<td height="171" colspan="3">
<table width="100%" height="129" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td valign="top">
<table width="100%" height="265" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td height="5"></td>
</tr>
<tr>
<td width="195" height="263" valign="top">
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td width="55%" height="82"> <img src="images/reg.gif" width="84" height="54"></td>
<td width="45%"><b>注册帮助</b></td>
</tr>
<tr>
<td height="112" colspan="2" valign="top"><ul>
<li> 用户名：为用户登录留言簿的通行证，可使用英文字母、数字和下划线。</li>
<li>真实姓名： 请输入真实的姓名，只能是英文或汉字。</li>
<li>年龄:用户的真实年龄,只可以输入数字。</li>
<li>Email：请填写有效的Email地址，以便与您联系。</li>
</ul></td>
</tr>
<tr>
<td colspan="2" valign="middle"></td>
</tr>
</table>
</td>
<td width="19" background="../../../../javaScript(09)/06/Images/line.gif"></td>
<td width="436" valign="top"><br>
<br>
<table width="90%" border="0" cellpadding="-2" cellspacing="-2">
<tr>
<td><form name="form1">
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td width="18%" height="30">用
户 名：</td>
<td width="82%"><input name="UserName" type="text" id="UserName4" maxlength="20">
* </td>
</tr>
<tr>
<td height="28">真实姓名：</td>
<td height="28"><input name="TrueName" type="text" id="TrueName4" maxlength="10" onkeypress="Clavier(1,event)">
*</td>
</tr>
<tr>
<td height="28">年 龄：</td>
<td><input name="Age" type="text" id="Age" onkeypress="Clavier(0,event)"></td>
</tr>
<tr>
<td height="28">证件号码：</td>
<td><input name="pcard" type="text" id="pcard" onkeypress="Clavier(0,event)"> </td>
</tr>
<tr>
<td height="28">联系电话：</td>
<td><input name="tel" type="text" id="Tel"></td>
</tr>
<tr>
<td height="28" style="padding-left:10px">Email：</td>
<td><input name="Email" type="text" id="PWD224" size="35">
</td>
</tr>
<tr>
<td height="28">个人主页：</td>
<td><input name="homepage" type="text" id="homepage" size="35"></td>
</tr>
<tr>
<td height="34"> </td>
<td><input name="Button" type="button" value="确定保存">
<input name="Submit2" type="reset" value="重新填写"></td>
</tr>
</table>
</form></td>
</tr>
</table></td></tr>
<tr>
<td height="5"></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function Clavier(n,event){
// 获取当前按下的键盘按键对应的 ASCII 码
var k = event.keyCode;
var e=event;
var T=true;
alert(k);
// 先放行所有必要的功能键（退格、删除、方向键、Tab等）
// 8: Backspace, 46: Delete, 37-40: 方向键, 9: Tab, 13: Enter
if (k == 8 || k == 46 || (k >= 37 && k <= 40) || k == 9 || k == 13) {
return true;
}
// 根据传入的参数 n 来决定允许输入的字符类型
if (n == 1) {
// 如果 n=1，限制只能输入大写字母（ASCII码 65-90 对应 A-Z）
if (k >= 65 && k <= 90)
T = true; // 允许输入
else
T = false; // 禁止输入
} else if (n == 0) {
// 如果 n=0，限制只能输入数字
// (k>=48 && k<=57) 对应主键盘区的数字 0-9
// (k>=96 && k<=105) 对应小键盘区的数字 0-9
if ((k >= 48 && k <= 57) ) { //||(k>=96 && k<=105) 这里跟字母ASCII码有冲突！
T = true; // 允许输入
} else {
T = false; // 禁止输入
}
}
// 如果最终判定 T 为 false（即按下的键不在允许范围内），
// 则阻止该按键的默认行为（也就是不让这个字符出现在输入框里）
if (T == false)
e.preventDefault();
return false;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_6/
（3）Tips
用的多久的教材，漏洞百出，整了半天，烦人。
7. 练习7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页加载时缩小图片</title>
</head>
<body >
<img src="image1.jpg" id="img1" onmouseover="blowup()" onmouseout="reduce()">
<script type="text/javascript">
var img1=document.getElementById("img1");
var originalW = img1.width;
var originalH = img1.height;
function reduce(){
img1.height=originalH-100;
img1.width=originalW-100;
}
function blowup(){
img1.height=originalH;
img1.width=originalW;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_7/
（3）Tips
只有谷歌正常，其他都一闪消失。
8. 练习8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框获得焦点时改变背景颜色</title>
</head>
<body>
<table width="337" height="204" border="0">
<tr>
<td width="108">用户名:</td>
<td width="213"><form name="form1" method="post" action="">
<input type="text" name="textfield" onfocus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>密码:</td>
<td><form name="form2" method="post" action="">
<input type="text" name="textfield2" onfocus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield3" onfocus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>性别:</td>
<td><form name="form4" method="post" action="">
<input type="text" name="textfield5" onfocus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>邮箱:</td>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield4" onfocus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
</table>
<script type="text/javascript">
function txtfocus(){
var obj=event.target;
obj.style.background="#FFFF66";
}
function txtblur(){
var obj=event.target;
obj.style.background="#FFFFFF";
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_8/
（3）Tips
比较简单。
9. 练习9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用下拉列表框改变字体颜色</title>
</head>
<body>
<form name="form1" method="post" action="">
<input name="textfield" type="text" value="JavaScript从入门到精通">
<select name="menu1" onChange="Fcolor()">
<option value="black">黑</option>
<option value="yellow">黄</option>
<option value="blue">蓝</option>
<option value="green">绿</option>
<option value="red">红</option>
<option value="purple">紫</option>
</select>
</form>
<script type="text/javascript">
function Fcolor(){
var obj=event.target;
form1.textfield.style.color=obj.value;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_9/
（3）Tips
表单能用name，放在elements数组里。
10. 练习10
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交时验证是否为空</title>
</head>
<body>
<table width="487" height="333" border="0" cellpadding="0" cellspacing="0" background="bg.JPG">
<tr>
<td valign="top"><br>
<br>
<br>
<br> <br>
<table width="86%" border="0" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
<form name="form1" onReset="return AllReset()" onsubmit="return AllSubmit()">
<tr bgcolor="#FFFFFF">
<td height="22">所属类别:</td>
<td height="22">
<select name="txt1" id="txt1">
<option value="数码设备">数码设备</option>
<option value="家用电器">家用电器</option>
<option value="礼品工艺">礼品工艺</option>
</select>
<select name="txt2" id="txt2">
<option value="数码相机">数码相机</option>
<option value="打印机">打印机</option>
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22">商品名称:</td>
<td height="22"><input name="txt3" type="text" id="txt3" size="30" maxlength="50"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22">会员价:</td>
<td height="22"><input name="txt4" type="text" id="txt4" size="10"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22">提供厂商:</td>
<td height="22"><input name="txt5" type="text" id="txt5" size="30" maxlength="50"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22">商品简介:</td>
<td height="22"><textarea name="txt6" cols="35" rows="4" id="txt6"></textarea></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22">商品数量:</td>
<td height="22"><input name="txt7" type="text" id="txt7" size="10"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="22" colspan="2"><input name="sub" type="submit" id="sub2" value="提交">
<input type="reset" name="Submit2" value="重 置"> </td>
</tr>
</form>
</table></td>
</tr>
</table>
<script type="text/javascript">
function AllReset(){
if(window.confirm("是否进行重置？"))
return true;
else
return false;
}
function AllSubmit(){
var T=true;
var obj=event.target;
for (var i=1;i<=7;i++){
if (obj["txt"+i].value==""){
T=false;
break;
}
}
if (!T){
alert("提交信息不允许为空");
}
return T;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_10/
（3）Tips
搓火。
11. 练习11
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示选择的文本</title>
</head>
<body>
<form name="form1" method="post" action="">
<input name="textfield" type="text" onselect="return Tselect()" value="hello!JavaScript">
</form>
<script type="text/javascript">
function Tselect(){
var txt=window.getSelection();
if (txt=="hello!"){
alert("您当前所选择的内容为："+txt);
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_11/
（3）Tips
onselect，window.getSlection。
12. 练习12
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本不能被选择</title>
</head>
<body onselectstart="Tselect()">
<h2>欢迎访问本网站</h2>
<script type="text/javascript">
function Tselect(){
alert("不允许选择文本！");
return false;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_12/
（3）Tips
不爽。
13. 练习13
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>来回拖动图片</title>
<style>
.mr-cont {
width: 495px;
height: 300px;
margin: 0 auto;
text-align: center;
border:1px solid #f00;
}
#left, #right {
height: 200px;
width: 200px;
float: left;
margin-left: 30px;
border: 1px solid gray;
}
img{
height: 150px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h1>拖放图片</h1>
<div id="left" ondragover="dragover(event)" ondrop="drop(event)">
<img src="face.png" id="pic">
</div>
<div id="right" ondragover="dragover(event)" ondrop="drop(event)"></div>
</div>
<script type="text/javascript">
var pic = document.getElementById("pic");//获取被拖放的元素
function dragover(e){
e.preventDefault();//阻止默认行为，即允许被拖动
}
function drop(e){
e.preventDefault();//阻止默认行为，即允许被拖动
e.target.appendChild(pic);//移动被拖放的元素
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_13/
（3）Tips
ondragover，ondrop，preventDefault，appand，同一时间只能存在于同一位置。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="01.png" onmouseover="addBorder(event)" onmouseout="removeBorder(event)">
<script type="text/javascript">
function addBorder(event){
event.target.style.border = '3px solid green';
}
function removeBorder(event){
event.target.style.border = 0;
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_14/
（3）Tips
e.target，.style.border。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>（单项选择题）被称为“国球”的球类运动是__________。</p>
A、篮球<br />B、排球<br />C、乒乓球<br />D、羽毛球
<script type="text/javascript">
function Refurbish(){
var code=window.event.keyCode;
if (code==65){
alert("您的答案是A\n答案不正确！");
}else if (code==66){
alert("您的答案是B\n答案不正确！");
}else if (code==68){
alert("您的答案是D\n答案不正确！");
}else if(code==67){
alert("您的答案是C\n答案正确！");
}
}
document.onkeydown=Refurbish;
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_15/
（3）Tips
event.keyCode，onkeydown。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间对象</title>
<script type="text/javascript">
function showDateTime() {
var now = new Date();
var year=now.getFullYear(); //获取当前年份
var month=now.getMonth()+1; //获取当前月份
var date=now.getDate(); //获取当前日期
var hour=now.getHours(); //获取当前小时数
var minute=now.getMinutes(); //获取当前分钟数
var second=now.getSeconds(); //获取当前秒数
alert("今天是："+year+"年"+month+"月"+date+"日 "+"\n现在是："+hour+":"+minute+":"+second);
}
</script>
</head>
<body onLoad="showDateTime()">
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_16/
（3）Tips
又回到时间对象。
4. 训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function myFun(){
var w=window.outerWidth;
var h=window.outerHeight;
var txt="窗口大小: 宽度=" + w + ", 高度=" + h;
document.getElementById("demo").innerHTML=txt;
}
</script>
</head>
<body onresize="myFun()">
<p id="demo"></p>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_17/
（3）Tips
onresize，window.outerWidth。
5. 训练5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form1">
用户名：<input type="text" onFocus="txtfocus(event)" onBlur="txtblur(event)"><br>
密码：<input type="text" onFocus="txtfocus(event)" onBlur="txtblur(event)">
</form>
<script type="text/javascript">
function txtfocus(event){
var obj=event.target;
obj.style.border="3px solid #FF0000";
}
function txtblur(event){
var obj=event.target;
obj.style.border="";
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_18/
（3）Tips
event.target，onFocus。
6. 训练6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form1">
<label>出生年月：</label>
<select name="year" onChange="showBirth()">
<option value="">请选择年份</option>
<script type="text/javascript">
for(var i=1970; i<=2000; i++){
document.write("<option value="+i+">"+i+"年</option>");
}
</script>
</select>
<select name="month" onChange="showBirth()">
<option value="">请选择月份</option>
<script type="text/javascript">
for(var i=1; i<=12; i++){
document.write("<option value="+i+">"+i+"月</option>");
}
</script>
</select>
</form>
<script type="text/javascript">
function showBirth(){
var year=form1.year.value;
var month=form1.month.value;
if(year!="" && month!=""){
alert("您的出生年月是"+year+"年"+month+"月");
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_19/
（3）Tips
onChange，用js生成。
7. 训练7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form" onReset="resetForm()">
<div>用户登录</div>
<div>
<label>用户名：</label>
<input type="text" name="username">
<strong>*</strong>
<span id="showuser"></span>
</div>
<div>
<label>密码：</label>
<input type="password" name="pwd">
<strong>*</strong>
<span id="showpwd"></span>
</div>
<div>
<input type="button" id="send" value="登录">
<input type="reset" id="res" value="重置">
</div>
</form>
<script type="text/javascript">
function resetForm(){
alert("表单已重置！");
form.username.focus();
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_20/
（3）Tips
laber标签，form.username.focus。
8. 训练8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.mr-cont {
width: 495px;
height: 300px;
margin: 0 auto;
text-align: center;
border:1px solid #f00;
}
#left, #right {
height: 200px;
width: 200px;
float: left;
margin-left: 30px;
border: 1px solid gray;
}
img{
height: 150px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h1>拖放图片</h1>
<div id="left" >
<img src="face.png" id="pic">
</div>
<div id="right" ondragover="DragObject(event)" ondragleave="DragObject(event)" ondrop="DragObject(event)" >
</div>
</div>
<script type="text/javascript">
function DragObject(Devent){
switch(Devent.type){
case "dragover":
Devent.preventDefault();
document.title="在目标容器范围内进行拖动";
alert(Devent.type+"1");
//break;
case "dragleave":
document.title="对象离开目标容器";
alert(Devent.type+"2");
//break;
case "drop":
Devent.preventDefault();
e.target.appendChild(pic);//移动被拖放的元素
document.title="在目标容器中放下该对象";
alert(Devent.type+"3");
break;
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_21/
（3）Tips
啥玩意，怎么改都没反应。
9. 训练9
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.droptarget {
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p draggable="true" id="dragtarget">拖动到矩形中</p>
<div ondragover="dragover(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
var pic = document.getElementById("dragtarget");//获取被拖放的元素
function dragover(e){
e.preventDefault();//阻止默认行为，即允许被拖动
}
function drop(e){
e.preventDefault();//阻止默认行为，即允许被拖动
e.target.appendChild(pic);//移动被拖放的元素
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_22/
（3）Tips
为什么。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="welcome" style="font-size:18px" onmouseover="change()" onmouseout="resume()">欢迎购买明日科技图书</span>
<script type="text/javascript">
var obj=document.getElementById('welcome');
function change(){
obj.style.color="#0000FF";
obj.style.fontSize="24px";
}
function resume(){
obj.style.color="#000000";
obj.style.fontSize="18px";
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_23/
（3）Tips
怎么又降智了。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="关灯">
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
if(this.value=="关灯"){
document.body.style.backgroundColor="black";
this.value="开灯";
}else{
document.body.style.backgroundColor="white";
this.value="关灯";
}
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_24/
（3）Tips
this.value，btn.onclick。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="btn" type="button" value="测试" onmousedown="down(event)" onmouseup="up(event)">
<script type="text/javascript">
function down(event){
event.target.style.backgroundColor="green";
event.target.style.color="red";
}
function up(event){
event.target.style.backgroundColor="";
event.target.style.color="";
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/9_25/
（3）Tips
event.targert 。