摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript事件</title> <link rel="stylesheet" type="tex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript事件</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 30px auto;
text-align: center;
line-height: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<input type="text" name="" onfocus="myfocus(this)" onblur="myblur(this)">
<div onclick="myclick(this)" ondblclick="mydblclick(this)">1</div>
<div onmousedown="mymousedown(this)">2</div>
<div onmouseup="mymouseup(this)">3</div>
<div onmouseover="mymouseover(this)" onmouseout="mymouseout(this)">4</div>
<div onmousemove="mymousemove(this)">5</div>
<form onsubmit="mysubmit(this)">
<input type="submit" value="submit" name="">
</form>
<script type="text/javascript">
// 元素獲得焦點
function myfocus(f){
f.style.background='red';
}
// 元素失去焦點
function myblur(b){
b.style.background='#fff';
}
// 鼠標單擊對象調(diào)用
function myclick(x){
x.style.borderRadius='50%';
}
// 鼠標雙擊對象調(diào)用
function mydblclick(y){
y.style.background='green';
}
// 鼠標按鈕被按下
function mymousedown(down){
down.style.background='blue';
}
// 鼠標按鈕被松開
function mymouseup(up){
up.style.background='#ccc';
}
// 鼠標移動到元素之上(只觸發(fā)一次)
function mymouseover(over){
over.style.background='black';
}
// 鼠標從元素上移開
function mymouseout(out){
out.style.background='red';
}
// 被移動到元素上(只要移動就不停觸發(fā))
function mymousemove(move){
move.style.background='yellow';
}
function mysubmit(s){
alert('點擊成功');
}
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-14 09:20:16
老師總結(jié)：完成的不錯。js功能很強大，要堅持學(xué)習(xí)。繼續(xù)加油。