작성자

freewebkorea

카테고리

비밀번호

제목

<H2>event Object</H2>
event Property는 JavaScript의 Keyboard event, Mouse event 등에 의해 발생하는 mouse의 좌표라든지, 어떤 Keyboard가 눌려졌는지 또는 event가 발생하는 object에 대한 정보들을 return 해 줍니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>event Object Property</TD></TR>
<TR>
<TD class=syntaxLeftCell width="15%">altKey</TD>
<TD class=syntaxRightCell>alt Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false)</TD></TR>
<TR>
<TD class=syntaxLeftCellshort>button</TD>
<TD class=inlineRightCellTitle width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle colSpan=2>mouse button이 눌려진 상태 return</TD></TR>
<TR>
<TD class=inlineLeftCellshort width=50>0</TD>
<TD class=inlineRightCell>아무 button 도 안 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort>1</TD>
<TD class=inlineRightCell>왼쪽 button이 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">2</TD>
<TD class=inlineRightCell width="85%">오른쪽 button이 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort>3</TD>
<TD class=inlineRightCell>왼쪽과 오른쪽 button이 동시에 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">4</TD>
<TD class=inlineRightCell width="85%">가운데 button이 동시에 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort>5</TD>
<TD class=inlineRightCell>왼쪽과 가운데 button이 동시에 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">6</TD>
<TD class=inlineRightCell width="85%">오른쪽과 가운데 button이 동시에 눌려진 상태</TD></TR>
<TR>
<TD class=inlineLeftCellshort>7</TD>
<TD class=inlineRightCell>3개의 button이 동시에 눌려진 상태</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCell>clientX</TD>
<TD class=syntaxRightCell>창 테두리와 scrollbar 를 제외한 영역에서의 mouse의 X 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>clientY</TD>
<TD class=syntaxRightCell>창 테두리와 scrollbar 를 제외한 영역에서의 mouse의 Y 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>ctrlKey</TD>
<TD class=syntaxRightCell>ctrl Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false)</TD></TR>
<TR>
<TD class=syntaxLeftCell>keyCode</TD>
<TD class=syntaxRightCell>Keyboard 문자의 <A href="http://www.cadvance.org/doc/css/pseudo/iso-latin-1.asp" target=_blank>Unicode(ISO-Latin-1 character set)</A> 값 return</TD></TR>
<TR>
<TD class=syntaxLeftCell>offsetX</TD>
<TD class=syntaxRightCell>event 가 발생하는 box(object) 좌측 상단에 대한 mouse cursor의 X 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>offsetY</TD>
<TD class=syntaxRightCell>event 가 발생하는 box(object) 좌측 상단에 대한 mouse cursor의 Y 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>screenX</TD>
<TD class=syntaxRightCell>사용자 모니터에 대한 mouse cursor의 X 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>screenY</TD>
<TD class=syntaxRightCell>사용자 모니터에 대한 mouse cursor의 Y 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>shiftKey</TD>
<TD class=syntaxRightCell>shift Key가 눌려 졌는지의 여부 return (눌려졌으면 true, 아니면 false)</TD></TR>
<TR>
<TD class=syntaxLeftCell>srcElement</TD>
<TD class=syntaxRightCell>event가 발생하는 element return</TD></TR>
<TR>
<TD class=syntaxLeftCell>x</TD>
<TD class=syntaxRightCell>상대 위치로 positioning (position:relative;) 된 1 단계 상위 element 에 대한 mouse cursor의 x 상대 좌표</TD></TR>
<TR>
<TD class=syntaxLeftCell>y</TD>
<TD class=syntaxRightCell>상대 위치로 positioning (position:relative;) 된 1 단계 상위 element 에 대한 mouse cursor의 y 상대 좌표</TD></TR></TBODY></TABLE> 
<HR class=grayHr>
 shiftKey, ctrlKey, altKey 
shiftKey, ctrlKey, altKey 가 눌려진 상태인지 아닌지를 true(1), false(0) 값으로 return 해 줍니다.예제 
<DIV class=input id=shift_ctrl_alt>&lt;html&gt; &lt;head&gt; &lt;title&gt;shiftKey, ctrlKey, altKey&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- 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 가 눌려지지 않은 상태입니다.!") } } // --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width:100%; height:150px;background-color:tomato;" onmousedown="shiftKeyPressed();"&gt;shift Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.&lt;/div&gt; &lt;div style="width:100%; height:150px;background-color:royalblue;" onmousedown="ctrlKeyPressed();"&gt;ctrl Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.&lt;/div&gt; &lt;div style="width:100%; height:150px;background-color:palegreen;" onmousedown="altKeyPressed();"&gt;alt Key를 누르고 클릭 또는 누르지 않고 클릭해 보세요.&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </DIV> <A href="javascript:copy2Clipboard(shift_ctrl_alt);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=grayHr>
 button 
실행 한 후에 오른쪽 버튼을 눌러 보고 event.button == 2 에서 2를 1 ~ 7 사이의 수를 바꾸어 입력하고 시험해 보세요... 동시에 누르는 경우 버튼 2개를 같은 순간에 눌러야 된다는 뜻이 아니라 2개가 눌려 지기만 하면 된다는 뜻입니다. 시간 맞춰서 같이 누를라고 애쓰지 마시져...입력 <PRE class=input id=button_2>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;button&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function button_2(){
 if (event.button == 2)
 {alert ("오른쪽 button 을 눌렀습니다.")}
 }
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onmousedown="button_2();"&gt;
 오른쪽 버튼을 누르시져... 그리고 event.button == 2 에서
 2를 1 ~ 7 사이의 수를 바꾸어 입력하고 시험해 보세요...
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(button_2);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=grayHr>
 srcElement, keyCode 
srcElement는 event가 발생하는 물체(object)의 정보를 return 하고, keyCode 는 Keyboard 문자의 <A href="http://www.cadvance.org/doc/css/pseudo/iso-latin-1.asp" target=_blank>Unicode</A> 값(숫자)을 return 해 줍니다.입력 <PRE class=input id=srcElement_keyCode>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;srcElement, keyCode&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function whichButton(){
 alert(event.keyCode)
 }
 
 function whichElement(){
 tag_Name = event.srcElement.tagName
 tag_ID = event.srcElement.id
 alert("나는 " + tag_Name + " element 이고, id는 " + tag_ID + " 입니다.")
 }
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body id="main" onkeyup="whichButton()" onclick="whichElement()"&gt;
 먼저 클릭을 한 후에 Keyboard를 눌렀다 떼면 Unicode 값이 alert 창에 나오게 됩니다.&lt;br /&gt;
 즉, 창에 focus가 들어 온 상태에서만 OnKeyUp 이 먹습니다.
 &lt;p id="para"&gt;p 입니다.&lt;/p&gt;
 &lt;div id="box"&gt;div 입니다.&lt;/div&gt;
 &lt;span id="inline"&gt;span 입니다.&lt;/span&gt;&lt;br /&gt;
 &lt;button type="button" id="btn"&gt;button 입니다.&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(srcElement_keyCode);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=grayHr>
 offsetX, offsetY 
offsetX, offsetY 는 절대위치(absolute)로 positioning 된 box의 좌측 상단을 기준으로 한 mouse의 X와 Y의 좌표를 return 해 줍니다.입력 
<DIV class=input id=offset_xy>&lt;html&gt; &lt;head&gt; &lt;title&gt;offsetX, offsetY&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- 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 } // --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body onmousemove="offsetStatus()" ondblclick="offsetCoords();"&gt; mouse cursor가 box 밖에 있을 때는 창의 좌측 상단을 기준으로 한 상대좌표가 status bar에 표시되고 bouble Click 하면 alert 창에 x, y 좌표가 뜨고, box 속으로 들어가면 box의 좌측 상단을 기준으로 한 상대좌표가 표시되고, click 하면 alert 창에 x, y 좌표가 표시 됩니다. &lt;DIV onclick="offsetCoords();" STYLE="width:200; height:200; background-color:gray; position:absolute; top:100; left:200; color:gold;"&gt; 이 DIV box는 top:100px, left:300px 위치에 position:absolute로 positioning 된 box 입니다. &lt;/DIV&gt; &lt;/body&gt; &lt;/html&gt; </DIV> <A href="javascript:copy2Clipboard(offset_xy);open_window2('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)