event Object
event Property는 JavaScript의 Keyboard event, Mouse event 등에 의해 발생하는 mouse의 좌표라든지, 어떤 Keyboard가 눌려졌는지 또는 event가 발생하는 object에 대한 정보들을 return 해 줍니다.
| event Object Property |
| altKey |
alt Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false) |
| button |
| mouse button이 눌려진 상태 return |
| 0 |
아무 button 도 안 눌려진 상태 |
| 1 |
왼쪽 button이 눌려진 상태 |
| 2 |
오른쪽 button이 눌려진 상태 |
| 3 |
왼쪽과 오른쪽 button이 동시에 눌려진 상태 |
| 4 |
가운데 button이 동시에 눌려진 상태 |
| 5 |
왼쪽과 가운데 button이 동시에 눌려진 상태 |
| 6 |
오른쪽과 가운데 button이 동시에 눌려진 상태 |
| 7 |
3개의 button이 동시에 눌려진 상태 | |
| clientX |
창 테두리와 scrollbar 를 제외한 영역에서의 mouse의 X 상대 좌표 |
| clientY |
창 테두리와 scrollbar 를 제외한 영역에서의 mouse의 Y 상대 좌표 |
| ctrlKey |
ctrl Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false) |
| keyCode |
Keyboard 문자의 Unicode(ISO-Latin-1 character set) 값 return |
| offsetX |
event 가 발생하는 box(object) 좌측 상단에 대한 mouse cursor의 X 상대 좌표 |
| offsetY |
event 가 발생하는 box(object) 좌측 상단에 대한 mouse cursor의 Y 상대 좌표 |
| screenX |
사용자 모니터에 대한 mouse cursor의 X 상대 좌표 |
| screenY |
사용자 모니터에 대한 mouse cursor의 Y 상대 좌표 |
| shiftKey |
shift Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false) |
| srcElement |
event가 발생하는 element return |
| x |
상대 위치로 positioning (position:relative;) 된 1 단계 상위 element 에 대한 mouse cursor의 x 상대 좌표 |
| y |
상대 위치로 positioning (position:relative;) 된 1 단계 상위 element 에 대한 mouse cursor의 y 상대 좌표 |
shiftKey, ctrlKey, altKey
shiftKey, ctrlKey, altKey 가 눌려진 상태인지 아닌지를 true(1), false(0) 값으로 return 해 줍니다.
예제
button
실행 한 후에 오른쪽 버튼을 눌러 보고 event.button == 2 에서 2를 1 ~ 7 사이의 수를 바꾸어 입력하고 시험해 보세요... 동시에 누르는 경우 버튼 2개를 같은 순간에 눌러야 된다는 뜻이 아니라 2개가 눌려 지기만 하면 된다는 뜻입니다. 시간 맞춰서 같이 누를라고 애쓰지 마시져...
입력
<html>
<head>
<title>button</title>
<script type="text/javascript">
<!--
function button_2(){
if (event.button == 2)
{alert ("오른쪽 button 을 눌렀습니다.")}
}
// -->
</script>
</head>
<body onmousedown="button_2();">
오른쪽 버튼을 누르시져... 그리고 event.button == 2 에서
2를 1 ~ 7 사이의 수를 바꾸어 입력하고 시험해 보세요...
</body>
</html>
srcElement, keyCode
srcElement는 event가 발생하는 물체(object)의 정보를 return 하고, keyCode 는 Keyboard 문자의 Unicode 값(숫자)을 return 해 줍니다.
입력
<html>
<head>
<title>srcElement, keyCode</title>
<script type="text/javascript">
<!--
function whichButton(){
alert(event.keyCode)
}
function whichElement(){
tag_Name = event.srcElement.tagName
tag_ID = event.srcElement.id
alert("나는 " + tag_Name + " element 이고, id는 " + tag_ID + " 입니다.")
}
// -->
</script>
</head>
<body id="main" onkeyup="whichButton()" onclick="whichElement()">
먼저 클릭을 한 후에 Keyboard를 눌렀다 떼면 Unicode 값이 alert 창에 나오게 됩니다.<br />
즉, 창에 focus가 들어 온 상태에서만 OnKeyUp 이 먹습니다.
<p id="para">p 입니다.</p>
<div id="box">div 입니다.</div>
<span id="inline">span 입니다.</span><br />
<button type="button" id="btn">button 입니다.</button>
</body>
</html>
offsetX, offsetY
offsetX, offsetY 는 절대위치(absolute)로 positioning 된 box의 좌측 상단을 기준으로 한 mouse의 X와 Y의 좌표를 return 해 줍니다.
입력
