HTML5 Key, MouseEvent
HTML5에서 키, 마우스 이벤트 처리 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Key Event</title>
<style type="text/css">
canvas { border:1px solid black;}
</style>
<script type="application/javascript">
var canvas;
function init() {
window.addEventListener("keydown", onKeyDown);
//window.addEventListener("keyup", onKeyUp);
canvas = document.getElementById("canvas1");
canvas.addEventListener('click', onCanvasClick);
//canvas.addEventListener('mousemove', onMouseMove);
}
function onKeyDown(event) {
var keyCode = 0;
if(event==null) {
keyCode = window.keyCode
window.event.preventDefault();
alert("이벤트 1:"+keyCode);
}else{
keyCode = event.keyCode;
event.preventDefault();
alert("이벤트 2:"+keyCode);
}
switch(keyCode){
case 37: // left key
alert("LEFT");
break;
case 38: // up key
alert("UP");
break;
case 39: // right key
alert("RIGHT");
break;
case 40: // down key
alert("DOWN");
break;
default:
break;
}
}
function onCanvasClick(event) { //canvas 상의 좌표로 보정하기 위한 내용
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
alert(x+","+y);
}
</script>
</head>
<body onload="init();">
<canvas id="canvas1" width="300" height="200"></canvas>
</body>
</html>