event Object | event Property


Home > Document > JavaScript > Object > Window > event Object

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 해 줍니다.

예제
<html>
<head>
<title>shiftKey, ctrlKey, altKey</title>
<script type="text/javascript">
<!--
function shiftKeyPressed(){
if (event.shiftKey==1){
alert("shift key 가 눌려진 상태입니다.!")
}
else
{
alert("shift key 가 눌려지지 않은 상태입니다.!")
}
}

function ctrlKeyPressed(){
if (event.ctrlKey==1){
alert("ctrl key 가 눌려진 상태입니다.!")
}
else
{
alert("ctrl key 가 눌려지지 않은 상태입니다.!")
}
}

function altKeyPressed(){
if (event.altKey==1){
alert("alt key 가 눌려진 상태입니다.!")
}
else
{
alert("alt key 가 눌려지지 않은 상태입니다.!")
}
}
// -->
</script>
</head>
<body>
<div style="width:100%; height:150px;background-color:tomato;"
onmousedown="shiftKeyPressed();">shift Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.</div>
<div style="width:100%; height:150px;background-color:royalblue;"
onmousedown="ctrlKeyPressed();">ctrl Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.</div>
<div style="width:100%; height:150px;background-color:palegreen;"
onmousedown="altKeyPressed();">alt Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.</div>
</body>
</html>


코드 실행 하기



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 해 줍니다.

입력
<html>
<head>
<title>offsetX, offsetY</title>
<script type="text/javascript">
<!--
function offsetCoords() {
var offsetInfo = ""
offsetInfo = "offsetX : " + window.event.offsetX + "\r"
offsetInfo += "offsetY : " + window.event.offsetY + "\r"
alert(offsetInfo);
}

function offsetStatus(){
window.status = "X = " + window.event.offsetX + " Y = " + window.event.offsetY
}
// -->
</script>
</head>
<body onmousemove="offsetStatus()" ondblclick="offsetCoords();">
mouse cursor가 box 밖에 있을 때는 창의 좌측 상단을 기준으로 한 상대좌표가 status bar에 표시되고
bouble Click 하면 alert 창에 x, y 좌표가 뜨고, box 속으로 들어가면 box의 좌측 상단을 기준으로 한 상대좌표가 표시되고, click 하면 alert 창에 x, y 좌표가 표시 됩니다.
<DIV onclick="offsetCoords();" STYLE="width:200; height:200; background-color:gray; position:absolute; top:100; left:200; color:gold;">
이 DIV box는 top:100px, left:300px 위치에 position:absolute로 positioning 된 box 입니다.
</DIV>
</body>
</html>


코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색