摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js事件测试</title> <style> div{ width: 200px; height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js事件测试</title>
<style>
div{
width: 200px;
height: 200px;
background: #ccc;
margin: 20px 0;
text-align: center;
line-height:200px;
}
</style>
</head>
<body>
<script type="text/javascript">
function demo1(x){
x.style.background="pink";
}
function demo2(y){
y.style.background="#ccc";
}
function demo3(z){
z.style.background="red";
}
function demo4(a){
a.style.borderRadius="25%";
}
function demo5(a){
a.style.borderRadius="50%";
}
</script>
<form action="">
获得焦点变粉： <input type="text" onfocus="demo1(this)"><br>
失去焦点变灰： <input type="text" onblur="demo2(this)"><br>
域的内容被改变： <input type="text" onchange="demo3(this)">
</form>
<div onmousedown="demo1(this)" onmouseup="demo3(this)" onmousemove="demo2(this)">
<p>鼠标按下松开与移开</p>
</div>
<div onclick="demo4(this)" ondblclick="demo5(this)">鼠标点击与双击</div>
<div onmouseover="demo1(this)" onmouseout="demo2(this)">鼠标移上与移开</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-14 14:44:02
老师总结：事件方法练习的比较全面,完成的不错,继续加油!
