이벤트 객체 (Event Object)

* 이벤트 객체 생성하기

- 이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할 수 있음.

- 이렇게 생성된 이벤트 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있음.

- 이벤트 객체 생성은 IE 8 이하 버전의 브라우저와 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE(9 이상) 등)에서 각각 방법이 다름.

 

[파이어폭스, 크롬, 사파리, 오페라, IE 9 이상에서 이벤트 객체 생성하기]

 

<script type="text/javascript">
document.onkeydown=function(e){
    alert(e);
}
</script>                                                      

 

[IE 8 이하 브라우저에서 이벤트 객체 생성하기]

 

<script type="text/javascript">
document.onkeydown=function(e){
    alert(window.event);
}
</script>

 

- IE 8 이하에서 이벤트 객체를 생성하려면 이벤트 발생 시 인위적으로 이벤트 객체를 생성해야 함.

 

[모든 브라우저에서 이벤트 객체 생성하기]

 

<script type="text/javascript">
document.onkeydown=function(e){
    var eventObj=e?e:widnow.event; // 삼항 연산자
    alert(eventObj);
}
</script>

 

 

 

- 이벤트 객체의 속성 종류

구분	종류	설명
마우스 이벤트 객체 속성	clientX	마우스 이벤트가 발생한 X 좌푯값(수평 스크롤바 이동 너비 무시)
	clientY	마우스 이벤트가 발생한 Y 좌푯값(수직 스크롤바 이동 높이 무시)
	pageX	마우스 이벤트가 발생한 X 좌푯값(수평 스크롤바 이동 너비 포함)
	pageY	마우스 이벤트가 발생한 Y 좌푯값(수직 스크롤바 이동 높이 포함)
	screenX	화면 모니터를 기준으로 이벤트가 발생한 X 좌푯값
	screenY	화면 모니터를 기준으로 이벤트가 발생한 Y 좌푯값
	layerX	position을 적용한 요소를 기준으로 이벤트가 발생한 X 좌푯값
	layerY	position을 적용한 요소를 기준으로 이벤트가 발생한 Y 좌푯값
	button	마우스에 눌린 버튼의 값
키보드 이벤트 객체 속성	keyCode	키보드에 눌린 유니코드 값
	altKey	Alt 키가 눌려 있으면 true를, 그렇지 않으면 false를 반환함.
	ctrlKey	Ctrl 키가 눌려 있으면 true를, 그렇지 않으면 false를 반환함.
	shiftKey	Shift 키가 눌려 있으면 true를, 그렇지 않으면 false를 반환함.
전체 이벤트 객체 속성	target	this와 같이, 이벤트가 발생한 요소를 반환함.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)