8-2 ???盤??鼠??

`NLPƹƥAHάdҡC

ڭ̥iHY@ӯSwO_QUABJpUG

  1. Q document.onkeydown ӧuƥvAëwƥBz{C
  2. bƥBz{AiHQ window.event.keycode ӪDNXAöiBzC
HUO@ӨdҡAunAU@LAN|ܹNXApUG

Example]keyboardEvent01.htm^G

WzdҪlɮצpUG

lɡ]keyboardEvent01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>LƥG򥻴</h2>
<hr>

<script>
function keyFunction() {
	alert("Key code = " + event.keyCode);
	if (event.keyCode==27) {
		alert("Esc إ\wQI");
		return false;
	} else if (event.keyCode==8) {
		alert("Backspace إ\wQI");
		return false;
	} else if (event.keyCode==9) {
		alert("Tab إ\wQI");
		return false;
	} else if (event.keyCode==71) {
		document.location="http://www.google.com";
	}
}
document.onkeydown=keyFunction;
</script>

ЫULNAHܫNXIЪ`NAUC䪺إ\wQG
<ul>
<li>Esc
<li>Tab
<li>Backspace
</ul>
~A"g" 䦳S\I

<hr>
</body>
</html>

bWzdҤAڭ̨ϥ onkeydown ƥӰ keyFunction() ơCSOn`NOApGƥBz{^ǵ document.onkeydown Ȭ falseAh䪺w]\N|QCҦpAWzdҪ Backspace]^W@^w]\NwgQFC

Hint
window.event.keycode iH²g event.keycodeC

ɭԧڭ̭nwq@ǡuvӰS\AOoǼ̦nOƦX] Shift Ctrl Alt AAN^AHK\즳w]\A]ڭ̴NnƦX`Ϊ ShiftBCtrlBAltAiUCdҡG

Example]keyboardEvent02.htm^G

WzdҪlɮצpUG

lɡ]keyboardEvent02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>LƥGƦX</h2>
<hr>

<script>
// Shift LNXO 16ACtrl LNXO 17AAlt LNXO 18
function keyFunction() {
	// Y[ĤGӱA|LX⦸ĵi
	// @O ShiftAĤGOL
	if ((event.shiftKey) && (event.keyCode!=16))	
		alert("Shift + "+event.keyCode);
	if ((event.ctrlKey) && (event.keyCode!=17))
		alert("Ctrl + "+event.keyCode);
	if ((event.altKey) && (event.keyCode!=18))
		alert("Alt + "+event.keyCode);
}
document.onkeydown=keyFunction;
</script>
ЫULNƦX] Shift  Ctrl  Alt AAN^AHܫNXI

<hr>
</body>
</html>

ѤWzdҥiAڭ̥i event.shiftKeyBevent.ctrlKeyBevent.altKey ȬO_O true ӽT{ Shift]LNXO 16^BCtrl]LNXO 17^BAlt]LNXO 18^ O_ObQUACʽ٦G

Hint
p󰻴 Windows MLҧΦզXHYŪ̪DAбNdұHڡA¡C

HUO@ӧ@ˤHG

Example]keyboardEvent03.htm^G

WzdҪlɮצpUG

lɡ]keyboardEvent03.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>LƥG@ˤH</h2>
<hr>

<script>
function encrypt(){
	event.keyCode-=1;
}
function check(){
	if (testField.value=="I am a pig")
		alert("FI");
}
</script>
ХLJuJ!bn!b!qjhvG
<p>
<input id=testField onKeyPress="encrypt()" onKeyUp="check()">

<hr>
</body>
</html>

bWzdҤAڭ̨ϥ input Ҫ onKeyPress ƥӧYɧܨϥΪ̪JAå onKeyUp ƥˬdϥΪ̬O_TJC

bHUANHۧAƹʡG

Example]newCursor01.htm^G

WzdҪlɮצpUG

lɡ]newCursor01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onmousemove="newCursor()">
<h2 align=center>LƥGHЪ</h2>

<script>
function newCursor() {
	redSquare.style.posLeft=event.clientX-10;
	redSquare.style.posTop=event.clientY-10;
}
</script>
<div id=redSquare style="position:absolute; top:10; left:10; height:20; width:20; background-color:red"></div>

</body>
</html>

bWzlXAڭ̨ϥ id=redSquare ӥNAevent.clientX event.clientY ONƹ۹ X M Y yСC

bHUAAiHϥΤV]bY^ӲʺG

Example]squareMover01.htm^G

WzdҪlɮצpUG

lɡ]squareMover01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onkeydown="move()">
<h2 align=center>LƥGϥΤVӲʪ</h2>
<hr>

<script>
function move(){
	ek=event.keyCode;
	if (ek==37) myArea.style.posLeft-=5;
	if (ek==39) myArea.style.posLeft+=5;
	if (ek==38) myArea.style.posTop-=5;
	if (ek==40) myArea.style.posTop+=5;
}
</script>
<div id=myArea style="position:absolute; top:20; left:20; height:50; width:50; background-color:#00FF00"></div>
ЫLVӲʺ⪺C

<hr>
</body>
</html>

t~AQ event.buttonAڭ̥iHϥΪ̥ΨӲͷƹƥ󪺷ƹ]άOk^AҦpG

Example]mouseEvent01.htm^G

bWzdҤAϥΤPƹhIrAN|ͤPĵiܩҥΪƹCWzdҪlɮצpUG

lɡ]mouseEvent01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ƹƥGƹ</h2>
<hr>

<script>
function showMouseButton() {
	switch (event.button){
		case 1:
			alert("AηƹI");
			break;
		case 2:
			alert("AηƹkI");
			break;
		case 4:
			alert("AηƹI");
			break;
		default:
			alert("ƹI");
			break;
	}
}
</script>
<div onMouseDown="showMouseButton()">ХηƹڡI</div>

<hr>
</body>
</html>

bWzdҤAڭ̨ϥ event.button ӰƹG

F]άOê^ϥΪ̤UϤάO˵lɡAڭ̥iHƹk䪺w]\AdҦpUG

Example]disableRightButton01.htm^G

bWzdҤAڭ̨ϥ event.button ӰƹApGOkAhHĵiJϥΪ̡Aæ^ falseAHw]\CMAuD@ءA]@VvAYA٬ONnϡAbWzU Ctrl-aAYiݨJBC]ѩgTAACXdҤ{XAAiHѽdҺۦ˵lXC^

dҡG


JavaScript {]pPΡGΩΤ