简单事件和函数的小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单事件和函数的小案例</title>
</head>
<script>
function style_bg(a){
a.style.background="gray";
}
function style_bg2(a){
a.style.background="white";
}
function style_bg3(a){
a.style.background="pink";
}
function submitFun(){
var a="是否确认提交？";
confirm(a);
}
function style_border(b){
b.style.borderRadius="50px";
}
</script>
<body>
<form action="" onsubmit="submitFun()">
<p>元素获得焦点和失去焦点<input type="text" onfocus="style_bg(this)" onblur="style_bg2(this)"></p>
<p>按下键盘再松开<input type="text" onkeydown="style_bg(this)" onkeyup="style_bg2(this)"></p>
<p><input type="text" onchange="style_bg3(this)" value="改变域"></p>
<input type="submit">
<div style="clear:both;"></div>
<div onclick="style_border(this);style_bg3(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标单击</div>
<div ondblclick="style_bg(this)" style="width: 100px;height: 100px;border:1px solid gray;float: left;">鼠标双击</div>
<div onmousedown="style_bg(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标按下</div>
<div onmousemove="style_bg(this)" onmouseout="style_bg2(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标移到这里再移开
</div>
<div onmouseover="style_bg(this)" onmouseout="style_bg2(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标移到元素上</div>
<div onmouseup="style_bg3(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标按键松开</div>
</form>
</body>
</html>
