摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript事件入门实例</title> <script type="text/javascript"> fun
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript事件入门实例</title>
<script type="text/javascript">
function myonfocus(a){
a.style.background="black"
}
function myonblur(b){
b.style.background="yellow"
}
function myonchange(){
var c=document.getElementById("aname")
c.value = c.value.toUpperCase()
}
function myonkeydown(d){
alert('按了一个按键吧？')
}
function myonkeyup(e){
alert('最后还是松开了吧？')
}
function myonkeypress(f){
alert('按了再松开')
}
function myonmousedown(g){
g.style.background="green"
}
function myonmousemove(h){
h.style.background="#FF44AA"
}
function myonmouseout(j){
j.style.background="#FFB7DD"
}
function myonmouseover(k){
k.style.background="#444444"
}
function myonmouseup(l){
l.style.background="#000000"
}
function myonsubmit(){
prompt('再次确认吗？')
}
</script>
</head>
<body><!-- onload="alert('页面加载完成')" -->
<div><h3>下面是javascript事件的入门实例</h3></div>
<div>
鼠标点击文本框变黑色；然后点击文本框外边黄色：<input type="text" onfocus="myonfocus(this)" onblur="myonblur(this)">
</div>
<div>输入小写字母后，鼠标点击文本框外，自动转换为大写字母：<input type="text" id="aname" onchange="myonchange()"></div>
<div>
点击按钮，弹出对话框：<button type="botton" onclick="alert('欢迎来到本站！')">点我</button>
</div>
<div>双击“hello”，弹出提示框：<span ondblclick="prompt('点了两次！')">hello</span></div>
<div>
在文本框内按任意键：<input type="text" onkeydown="myonkeydown(this)">
</div>
<div>在文本框按任意键后松开：<input type="text" onkeyup="myonkeyup(this)"></div>
<div>在文本框按任意字母键（英文状态）后松开会提示内容：<input type="text" onkeypress="myonkeypress(this)"></div>
<div>按F5刷新页面看到提示信息</div>
<div>在下面方形内按下鼠标，背景将会变色：<div style="width:50px;height:50px;border:1px solid #ccc;background:yellow" onmousedown="myonmousedown(this)"></div></div>
<div>鼠标在下面长方形框内移动，背景将会变色：<div style="width:50px;height:80px;border:1px solid #ccc;background: #888888" onmousemove="myonmousemove(this)"></div></div>
<div>鼠标从下面的长方形框内移出，背景颜色会变色：<div style="width:100px;height:80px;border:1px solid #C10066" onmouseout="myonmouseout(this)"></div></div>
<div>鼠标移到下面长方形框内，背景将会变色：<div style="width:100px;height:70px;border:1px solid #DDDDDD" onmouseover="myonmouseover(this)"></div></div>
<div>鼠标在下面正方形框内被松开，则背景会变色：<div style="width:70px;height:70px;border:1px solid #A20055" onmouseup="myonmouseup(this)"></div></div>
<div>点击提交按钮，会弹出提示框：<form action="#" onsubmit="myonsubmit()"><input type="submit"></form></div>
</body>
</html>
批改老师：韦小宝批改时间：2018-12-27 09:19:32
老师总结：现在是不是感觉前端还是很有意思很好玩的对吧，jQuery和js中的很多事件都是很有意思的！课后记得多练习
