* 이벤트 객체 생성하기
- 이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할 수 있음.
- 이렇게 생성된 이벤트 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있음.
- 이벤트 객체 생성은 IE 8 이하 버전의 브라우저와 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE(9 이상) 등)에서 각각 방법이 다름.
[파이어폭스, 크롬, 사파리, 오페라, IE 9 이상에서 이벤트 객체 생성하기]
1
2
3
4
5 |
<script type="text/javascript">
document.onkeydown=function(e){
alert(e);
}
</script> |
cs |
[IE 8 이하 브라우저에서 이벤트 객체 생성하기]
1
2
3
4
5 |
<script type="text/javascript">
document.onkeydown=function(e){
alert(window.event);
}
</script> |
cs |
- IE 8 이하에서 이벤트 객체를 생성하려면 이벤트 발생 시 인위적으로 이벤트 객체를 생성해야 함.
[모든 브라우저에서 이벤트 객체 생성하기]
1
2
3
4
5
6 |
<script type="text/javascript">
document.onkeydown=function(e){
var eventObj=e?e:widnow.event; // 삼항 연산자
alert(eventObj);
}
</script> |
cs |
- 이벤트 객체의 속성 종류
구분 |
종류 |
설명 |
마우스 이벤트 객체 속성 |
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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > JavaScript' 카테고리의 다른 글
[JavaScript] 키 코드(Key Code) 정리 (키보드 이벤트) (0) | 2022.06.16 |
---|---|
이벤트 (Event) (0) | 2017.05.21 |
함수 (Function) (0) | 2017.05.20 |
문서 객체 모델(DOM) (0) | 2017.05.20 |
브라우저 객체 모델(BOM) (0) | 2017.05.20 |
객체 / 내장객체 (0) | 2017.05.20 |
자바스크립트 기초 문법 (0) | 2017.05.20 |
쿠키(Cookie) (0) | 2017.05.18 |