abstrakt：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript事件入門實(shí)例</title> <script type="text/javascript"> fun
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript事件入門實(shí)例</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('按了一個(gè)按鍵吧？')
}
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('再次確認(rèn)嗎？')
}
</script>
</head>
<body><!-- onload="alert('頁(yè)面加載完成')" -->
<div><h3>下面是javascript事件的入門實(shí)例</h3></div>
<div>
鼠標(biāo)點(diǎn)擊文本框變黑色；然后點(diǎn)擊文本框外邊黃色：<input type="text" onfocus="myonfocus(this)" onblur="myonblur(this)">
</div>
<div>輸入小寫字母后，鼠標(biāo)點(diǎn)擊文本框外，自動(dòng)轉(zhuǎn)換為大寫字母：<input type="text" id="aname" onchange="myonchange()"></div>
<div>
點(diǎn)擊按鈕，彈出對(duì)話框：<button type="botton" onclick="alert('歡迎來(lái)到本站！')">點(diǎn)我</button>
</div>
<div>雙擊“hello”，彈出提示框：<span ondblclick="prompt('點(diǎn)了兩次！')">hello</span></div>
<div>
在文本框內(nèi)按任意鍵：<input type="text" onkeydown="myonkeydown(this)">
</div>
<div>在文本框按任意鍵后松開：<input type="text" onkeyup="myonkeyup(this)"></div>
<div>在文本框按任意字母鍵（英文狀態(tài)）后松開會(huì)提示內(nèi)容：<input type="text" onkeypress="myonkeypress(this)"></div>
<div>按F5刷新頁(yè)面看到提示信息</div>
<div>在下面方形內(nèi)按下鼠標(biāo)，背景將會(huì)變色：<div style="width:50px;height:50px;border:1px solid #ccc;background:yellow" onmousedown="myonmousedown(this)"></div></div>
<div>鼠標(biāo)在下面長(zhǎng)方形框內(nèi)移動(dòng)，背景將會(huì)變色：<div style="width:50px;height:80px;border:1px solid #ccc;background: #888888" onmousemove="myonmousemove(this)"></div></div>
<div>鼠標(biāo)從下面的長(zhǎng)方形框內(nèi)移出，背景顏色會(huì)變色：<div style="width:100px;height:80px;border:1px solid #C10066" onmouseout="myonmouseout(this)"></div></div>
<div>鼠標(biāo)移到下面長(zhǎng)方形框內(nèi)，背景將會(huì)變色：<div style="width:100px;height:70px;border:1px solid #DDDDDD" onmouseover="myonmouseover(this)"></div></div>
<div>鼠標(biāo)在下面正方形框內(nèi)被松開，則背景會(huì)變色：<div style="width:70px;height:70px;border:1px solid #A20055" onmouseup="myonmouseup(this)"></div></div>
<div>點(diǎn)擊提交按鈕，會(huì)彈出提示框：<form action="#" onsubmit="myonsubmit()"><input type="submit"></form></div>
</body>
</html>
Korrigierender Lehrer：韋小寶Korrekturzeit：2018-12-27 09:19:32
Zusammenfassung des Lehrers：現(xiàn)在是不是感覺(jué)前端還是很有意思很好玩的對(duì)吧，jQuery和js中的很多事件都是很有意思的！課后記得多練習(xí)