무슨 이벤트가 발행했는지, 어느 키보드나 마우스 단추를 눌렀는지 마우스 클릭, 마우스 움직임, 키입력 등의 이벤트의 상태를 참조한다.

event.propertyName
발생

이벤트가 발생되면 event 개체는 Javascript에 의해 자동적으로 생성된다.

특성

이벤트가 감지되면 내부적으로 기본적인 해당 이벤트처리자에 전달된다.
추가적으로 상세 정보를 획득하거나 제어하기 위해서는 event 개체를 접속하여야 한다.

이벤트는 type, 발생된 상태에서의 커서의 위치 등 여러가지 속성들 갖는데, 모든 속성들이 모든 이벤트에 적용되는 것은 아니고 다르며 각 개체별로 적용될 수 있는 이벤트처리자도 서로 다르다.

특기

event 개체는 이벤트가 발생되었을 때만 이벤트 처리자에서 사용이 가능하나 일반 코드에서는 사용할 수 없다.

모든 event 개체에서 이벤트 속성이 유효하지만 일부 이벤트에서는 그 속성이 의미가 없들 수 있다. 예를들면 fromElement와 toElement 속성은 onmouseover와 onmouseout 이벤트에서 처리할 때만 의미가 있다.

VBScript에서는 window 개체를 통하여 event 개체에 접속하여야 한다.

일부 속성들은 event 개체가 createEventObject 메서드로 생성된 것이 아니면 읽기 전용이다. 이 속성들은 altKey altLeft button clientX clientY ctrlKey ctrlLeft dataFld offsetX offsetY propertyName qualifier reason repeat screenX screenY shiftKey shiftLeft srcUrn type x, y 이다.

이 개체의 스크립트들은 IE4.0부터 적용된다.

적용
개체scriptHTML규격IE

참조
이벤트처리자들

이 개체는 (영문)DOMLevel 2(W3C Document Object Model)에 정의되었다.


컬렉션설명
bookmarks 현재 이벤트에 의하여 영항을 받는 줄들의 Microsoft ADO(ActiveX Data Objects) 북마크(bookmark)들의 컬렉션을 반환한다.
boundElements 데이터세트에 연결된 모든 페이지의 엘레멘트들의 컬렉션을 반환한다.

개체설명
dataTransfer 끌어놓기(drag-and-drop)에 사용되는 사전에 정의된 클립보드(clipboard) 양식들에 접속할 수 있게 해 준다.

Abstract 속성 IE6 -
⇒ event 개체가 사용하는 ASX 파일의 엔트리 배너의 요약(Abstract) 내용을 반환한다.
문법: [sVal=]event.Abstract
코드: <INPUT size=40 onkeydown=eventSample('Abstract') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
altKey 속성 IE4 -
⇒ 이벤트 작동을 위한 대체 키(Key)를 반환하거나 지정한다.
문법: event.altKey[=bVal]
코드: <INPUT size=40 onkeydown=eventSample('altKey') value='여기 초점을 주고 ALT Key를 눌러보라.'>
결과:
altLeft 속성 IE4 -
⇒ 이벤트 작동을 위한 대체 키(Key)를 반환하거나 지정한다.
문법: event.altLeft[=bVal]
코드: <INPUT size=40 onkeydown=eventSample('altLeft') value='여기 초점을 주고 왼쪽 ALT Key를 눌러보라.'>
결과:
Banner 속성 IE6 -
⇒ event 개체가 사용하는 ASX 파일의 banner 내용을 반환하한다.
문법: [sVal=]event.banner
예제button 속성 IE4 -
⇒ 마우스를 클릭하였을 때 어느 마우스 단추를 클릭했는지 번호로 반환한다.
왼쪽마우스는 1, 오른쪽마우스는 2이다. 아래 예제에서 오른쪽, 왼쪽 마우스를 클릭해 보라.
문법: [iVal=]event.button
bubbles 속성 - NS6
⇒ 이벤트 bubbles를 반환한다.
문법: [bVal=]event.bubbles
cancelable 속성 - NS6
⇒ 이벤트를 취소할 수 있는가를 부울값으로 반환한다.
문법: [bVal=]event.cancelable
cancelBubble 속성 IE4 -
⇒ 현재의 이벤트가 이벤트처리자들의 계통도에서 버블업(bubble up)할 것인가를 반환하거나 설정한다.
문법: event.cancelBubble[=bVal]
코드: <INPUT size=40 onkeydown=eventSample('cancelBubble') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
charCode 속성 NS
⇒ 이벤트 키의 글자코드를 반환한다.
문법: [=sVal]event.charCode
clientX 속성 IE -
⇒ 이벤트가 발생한 마우스포인터의 수평좌표를 픽셀단위로 반환하거나 설정한다. 아래 예제를 참조하라.
문법: [=iVal]event.clientX
코드: <INPUT size=40 onclick=eventSample('clientX') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
clientY 속성 IE -
⇒ 이벤트가 발생한 마우스포인터의 수좌좌표를 픽셀단위로 반환하거나 설정한다. 아래 예제를 참조하라.
문법: [iVal=]event.clientY
코드: <INPUT size=40 onclick=eventSample('clientY') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
contentOverflow 속성 IE -
⇒ 문서의 내용이 현재의 LayoutRect 개체 처리 후에 추가적인 내용을 포함하여 구성되는가를 부울값으로 반환한다.
문법: [bVal=]event.contentOverflow
코드: <INPUT size=40 onclick=eventSample('contentOverflow') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
ctrlKey 속성 IE4 -
⇒ 이벤트 ctrlKey 키가 눌렸는가를 부울값으로 반환한다.
아래 예제를 위하여 키를 입력하고, Ctrl Key를 누른 상태에서 싷험해 보라.
문법: [bVal=]event.ctrlKey
코드: <INPUT size=40 onkeydown=eventSample('ctrlKey') value='여기 초점을 주고 Ctrl Key를 눌러보라.'>
결과:
ctrlLeft 속성 IE -
⇒ 이벤트 ctrlLeft 키가 눌렸는가를 부울값으로 반환한다.
아래 예제를 위하여 키를 입력하고, ctrlLeft를 누른 상태에서 싷험해 보라.
문법: [bVal=]event.ctrlLeft
코드: <INPUT size=40 onkeydown=eventSample('ctrlLeft') value='여기 초점을 주고 왼쪽 Ctrl Key를 눌러보라.'>
결과:
currentTarget 속성 - NS6
⇒ 이벤트 현재 목표를 반환한다.
문법: [sVal=]event.currentTarget
data 속성 IE4 NS4
⇒ ondragdrop 이벤트에서 끌어놓기(drag drop) 된 개체들의 URL들의 배열변수를 문자열로 반환한다.
문법: [sVal=]event.data
dataFld 속성 IE -
⇒ oncellchange 이벤트에 의하여 영향을 받은 데이터 칸을 반환하거나 설정한다.
문법: [sVal=]event.dataFld
코드: document.write(oObj.dataFld) 결과:
dataTransfer 속성 IE5 -
⇒ 이벤트 개체의 dataTransfer 인터페이스 포인터를 반환한다.
문법: [sVal=]event.dataTransfer
eventPhase 속성 - NS6
⇒ 이벤트 eventPhase를 반환한다.
문법: [sVal=]event.eventPhase
fromElement 속성 IE4 -
⇒ 이벤트가 발생된 개체를 반환하거나 설정한다.
문법: event.fromElement[=oVal]
코드: <INPUT size=40 onmouseover=eventSample('fromElement') value='여기에 마우스를 올려보라.'>
결과:
height 속성 - NS4
⇒ 이벤트를 전달한 개체를 포함한 윈도우나 프레임의 높이를 반환한다.
문법: [iVal=]event.height
initEvent 속성 - NS6
⇒ 이벤트를 초기화한다.
문법: [sVal=]event.initEvent
예제keyCode 속성 IE -
⇒ onkeypress 이벤트에서 10진수 키값을 반환한다. 읽기 전용이다. 아래 예제를 보라.
문법: [iVal=]event.keyCode
코드: <INPUT size=40 onkeydown=eventSample('keyCode') value='여기 초점을 주고 Key를 눌러보라.'>
결과:
layerX / layerY 속성 - NS4
⇒ 픽셀단위로, 이벤트가 발생된 layer에, 혹은 onresize 이벤트가 발생된 위치로 부터의 상대적인 수평/수직 위치를 반환한다. 이들은 개체의 width/height를 나타내며 x, y 이벤트 개체 속성들과 상호 호환된다.
문법: [iVal=]event.layerX
문법: [iVal=]event.layerY
modifiers(개체) 속성 - NS4
⇒ 키(key)나 마우스(mouse) 이벤트에서 세부 수정자(modifier) 키들(ALT_MASK, CONTROL_MASK, SHIFT_MASK, META_MASK)의 문자열을 반환한다.
문법: event.modifiers
MoreInfo 속성 IE6 -
⇒ event 개체가 사용하는 ASX 파일의 엔트리 배너의 추거 정보(MoreInfo) 내용을 반환한다.
문법: [sVal=]event.MoreInfo
nextPage 속성 IE -
⇒ 프린트 템플릿에서 다음 페이지의 위치를 반환한다.
문법: [sVal=]event.nextPage
offsetX 속성 IE4 -
⇒ 이벤트가 발생된 싯점에서 페이지에 상대적인 커서의 오프셋(offset) 수평 거리 x를 반환하거나 설정한다
문법: event.offsetX[=iVal]
코드: <INPUT size=40 onkeydown=eventSample('offsetX') value='여기 초점을 주고 Key를 눌러보라.'>
결과:
offsetY 속성 IE4 -
⇒ 이벤트가 발생된 싯점에서 페이지에 상대적인 커서의 오프셋(offset) 직평 거리 y를 반환하거나 설정한다.
문법: event.offsetY[=iVal]
코드: <INPUT size=40 onkeydown=eventSample('offsetY') value='여기 초점을 주고 Key를 눌러보라.'>
결과:
preventDefault 속성 - NS6
⇒ 이벤트 preventDefault를 반환한다.
문법: [bVal=]event.preventDefault
propertyName 속성 IE5 -
⇒ 개체에서 변경되는 속성명(propertyName)을 반환하거나 설정한다.
문법: event.propertyName[=sVal]
코드: <INPUT size=40 onpropertychange=eventSample('propertyName') value='여기 초점을 주고 Key를 눌러보라.'>
결과:
qualifier 속성 IE
⇒ 데이터 원천 개체에 의하여 제공된 데이터 멤버 이름을 반환하거나 설정한다.
문법: event.qualifier[=sVal]
코드: <INPUT size=40 onclick=eventSample('qualifier') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
reason 속성 IE4 -
⇒ 데이터 원천 개체에서 데이터 송신의 결과를 반환하거나 설정한다.
문법: event.reason[=sVal]
코드: <INPUT size=40 onclick=eventSample('reason') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
recordset 속성 IE
⇒ 개체 데이터 소스로부터 디폴트 리코드세트의 참조를 반환하거나 설정한다.
문법: .recordset[=oVal]
코드: <INPUT size=40 onclick=eventSample('recordset') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
repeat 속성 IE5 -
⇒ onkeydown 이벤트에서 반복(repeat) 여부를 부울값으로 반환한다.
문법: [bVal=]event.repeat
코드: <INPUT size=40 onkeydown=eventSample('repeat') value='여기 초점을 주고 Key를 눌러보라.'>
결과:
returnValue 속성 IE4 -
⇒ 이벤트로 부터의 반환값(returnValue)을 반환한다.
문법: event.returnValue[=sVal]
코드: <INPUT size=40 onchange=eventSample('returnValue') value='여기 초점을 주고 내용을 변경시켜 보라.'>
결과:
saveType 속성 IE
⇒ oncontentsave 이벤트가 발생되었을 때 클립보드 타입을 반환한다.
문법: [sVal=]event.saveType
코드: <INPUT size=40 onclick=eventSample('saveType') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
예제screenX 속성 IE4 NS4
⇒ 이벤트가 발생된 싯점에서 스크린에 상대적인 마우스 포인터의 수평 위치를 픽셀단위로 반환하거나 설정한다.
아래 예제를 참고하라.
문법: event.screenX[=iVal]
코드: <INPUT size=40 onclick=eventSample('screenX') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
예제screenY 속성 IE4 NS4
⇒ 이벤트가 발생된 싯점에서 스크린에 상대적인 마우스 포인터의 수직 위치를 픽셀단위로 반환하거나 설정한다.
아래 예제를 참고하라.
문법: event.screenY[=iVal]
코드: <INPUT size=40 onclick=eventSample('screenY') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
shiftKey 속성 IE4
⇒ 키 입력에서 shiftKey가 눌렸는가를 부울값으로 반환한다. Shift Key를 누른 상태에서 키를 누르고 실험해 보라.
문법: [bVal=]event.shiftKey
코드: <INPUT size=40 onkeydown=eventSample('shiftKey') value='여기 초점을 주고 SHIFT Key를 눌러보라.'>
결과:
shiftLeft 속성 IE
⇒ 키 입력에서 왼쪽 shiftKey가 눌렸는가를 부울값으로 반환한다. Shift Key를 누른 상태에서 키를 누르고 실험해 보라.
문법: [bVal=]event.shiftLeft
코드: <INPUT size=40 onkeydown=eventSample('shiftLeft') value='여기 초점을 주고 왼쪽 SHIFT Key를 눌러보라.'>
결과:
srcElement 속성 IE4 -
⇒ 이벤트가 발생된 엘레멘트(srcElement) 개체를 반환하거나 설정한다.
문법: event.srcElement[=oVal]
코드: <INPUT size=40 onclick=eventSample('srcElement') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
srcFilter 속성 IE
⇒ onfilterchange 이벤트가 발생되었을 때 이벤트를 발생시킨 원본 필터 개체를 반환하거나 설정한다.
문법: event.srcFilter[=oVal]
srcUrn 속성 IE
⇒ 이벤트를 빌생시킨 behavior의 주소(URN)를 반환하거나 설정한다.
문법: event.srcUrn[=sVal]
stopPropagation 속성 - NS6
⇒ 이벤트 stopPropagation를 반환한다.
문법: [bVal=]event.stopPropagation
target 속성 - NS4
⇒ 모든 이벤트에서 이벤트가 보내지는 목표의 참조 개체를 반환한다.
문법: [sVal=]event.target
timeStamp 속성 - NS6
⇒ 이벤트 timeStamp를 반환한다.
문법: [sVal=]event.timeStamp
toElement 속성 IE
⇒ 사용자에 의하여 마우스가 어느 개체로 이동하는가를 반환하거나 설정한다.
문법: event.toElement[=oVal]
예제type 속성 IE4 NS4
⇒ 이벤트의 종류를 문자열(예: click, mousemove, keydown)로 반환하거나 설정한다. 아래 예제를 참조하라.
문법: event.type[=sVal]
코드: <INPUT size=40 onclick=eventSample('type') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
userName 속성 IE
⇒ useService 메서드에 전달된 우호적 이름(FriendlyName) 파라메터를 반환한다.
문법: event.userName[=sVal]
wheelDelta 속성 IE6
⇒ 굴림 마우스 단추가 이동한 방향과 거리를 반환하거나 설정한다.
문법: event.wheelDelta[=sVal]
코드: <INPUT size=40 onmousewheel=eventSample('wheelDelta') value='여기 초점을 주고 마우스를 굴려 보라.' style=height:3em>
결과:
which 속성 - NS4
⇒ 마우스를 클릭했을 때 대표 번호를 반환한다(1: 왼쪽 마우스, 2: 가운데 마우스, 3: 오른쪽 마우스).
키(key)를 눌렀을 때 값은 ASCII 값이 된다.
문법: [iVal=]event.which
width 속성 - NS4
⇒ 이벤트가 발생한 개체의 윈도우나 프레임의 너비를 반환한다.
문법: [iVal=]event.width
예제x 속성 IE4 NS4
⇒ 픽셀단위로, 이벤트가 발생된 layerNS에, 혹은 onresize 이벤트가 발생된 위치로 부터의 상대적인 수평 위치를 반환한다. 이들은 layerX 이벤트 개체 속성들과 상호 호환된다. 아래 예제를 참조하라.
문법: [iVal=]event.x
코드: <INPUT size=40 onclick=eventSample('x') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:
예제y 속성 IE4 NS4
⇒ 픽셀단위로, 이벤트가 발생된 layerNS에, 혹은 onresize 이벤트가 발생된 위치로 부터의 상대적인 수직 위치를 반환한다. 이들은 layerY 이벤트 개체 속성들과 상호 호환된다. 아래 예제를 참조하라.
문법: [iVal=]event.x
코드: <INPUT size=40 onclick=eventSample('y') value='여기 초점을 주고 마우스를 클릭해 보라.'>
결과:

watch와 unwatch 메서드 - NS
event 개체는 Object 개체의 watch NS와 unwatch NS 메서드를 전달받는다.

설명을 위한 예제

 
<BUTTON type=button id=eventObj onClick="alert('click')"
  altKey="C" value="설명을 위한 예제">설명을 위한 예제</BUTTON>
clickObj
click 해 보라.
 
<DIV style=width:260;height:4.6em;text-align:center;margin-left:1em;margin-top:2em
  id=clickObj class=show >click 해 보라.</DIV>
<SCRIPT>
var event1,event2,event3;
function mouseCheck(){
  oObj=event1=event;
  clickObj.innerHTML='type='+event.type+'<BR>button='+event.button+
    '<BR>screen X,Y=('+event.screenX+','+event.screenY+')';
}
document.onmousedown=mouseCheck;
</SCRIPT>
moveObj
mouse를 움직여 보라.
 
<DIV style=width:260;height:4.6em;text-align:center;margin-left:1em;margin-top:2em
 id=moveObj class=show >mouse를 움직여 보라.</DIV>
<SCRIPT>
function moveCheck(){
  oObj=event2=event;
  moveObj.innerHTML='type='+event.type+'<BR>screenX,Y=('+event.screenX+','+
    event.screenY+')<BR>event.x,y=('+event.x+','+event.y+')';
}
document.onmousemove=moveCheck;
</SCRIPT>
keyObj
key를 눌러 보라.
 
<DIV style=width:260;height:6em;text-align:center;margin-left:1em;margin-top:2em
 id=keyObj class=show >key를 눌러 보라.</DIV>
<SCRIPT>
function pressCheck(){
  oObj=event3=event;
  str='event.type='+event.type+br+'keyCode=('+event.keyCode+')'+br;
  str+='<SMALL>String.fromCharCode(event.keyCode)=</SMALL>'+br;
  str+='('+String.fromCharCode(event.keyCode)+')';
  keyObj.innerHTML=str;
}
document.onkeypress=pressCheck;
</SCRIPT>

예제

이벤트 목록 연결 (SHIFT 키를 누르면서 이 연결을 클릭하면 연결이 안된다.) 
<A href=../jsList.html onclick="cancelLink()">이벤트 목록 연결</A> (SHIFT 키를 누르면서 이 연결을 클릭하면 연결이 안된다.)
<SCRIPT>
function cancelLink(){
  alert('event.srcElement.tagName='+event.srcElement.tagName+'\nevent.shiftKey='+event.shiftKey)
  if ((event.srcElement.tagName=='A')&&(event.shiftKey)) event.returnValue=false;
}
</SCRIPT>