별의 공부 블로그 🧑🏻‍💻
728x90
728x170

* 이벤트 객체 생성하기

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

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

- 이벤트 객체 생성은 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90
그리드형(광고전용)

'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
⚠️AdBlock이 감지되었습니다. 원할한 페이지 표시를 위해 AdBlock을 꺼주세요.⚠️


📖 Contents 📖