1. `이벤트 객체` 이란?
ㅇ 이벤트 발생시 전달되는 정보 임
- 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
. 이는 이벤트 핸들러에 전달되며, 이벤트 정보를 담고 있음
.. 例) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 Ctrl,Alt,Shift 등의 키) 등
※ 이벤트 객체에 대해 잘 설명된 참고문헌 ☞ MDN web docs
2. [자바스크립트] 이벤트 객체
ㅇ 이벤트 리스너 함수에 넘겨지는 인수(매개변수) 임
- 통상, event, e, ev 등으로 표시하며,
- 이벤트에 대한 다양한 정보를 갖고 있어,
- 그에 따라 취할 동작(반응)을 달리 할 수 있음
※ 한편, 이벤트 객체를 다룰 때 유의할점으로는,
- 웹브라우저 마다 다소 다르게 구현되므로 사용시 유의해야 함 ☞ jQuery 이벤트 참조
3. [자바스크립트] 이벤트 객체의 주요 `속성`
※ (일반)
ㅇ type : 이벤트 종류
- 例) event.type => click 등
ㅇ target : 이벤트를 발생시킨 요소를 가리킴
- 例) event.target.id : 이벤트를 발생시킨 요소의 id 값을 나타냄
ㅇ currentTarget : 이벤트 버블링 단계에서의 현재 요소를 가리킴
ㅇ delegateTarget : 위임 처리하는 요소를 가리킴
※ (좌표 : xxxxX/xxxxY)
ㅇ screenX : 마우스 커서가 모니터 왼쪽 경계로부터 떨어진 픽셀 거리
ㅇ screenY : 마우스 커서가 모니터 위쪽 경계로부터 떨어진 픽셀 거리
ㅇ pageX : 마우스 커서가 창 왼쪽 경계로부터 떨어진 픽셀 거리
ㅇ pageY : 마우스 커서가 창 위족 경계로부터 떨어진 픽셀 거리
ㅇ clientX : 마우스 커서가 브라우저 표시 영역 상의 X 좌표
ㅇ clientY : 마우스 커서가 브라우저 표시 영역 상의 Y 좌표
ㅇ offsetX : 마우스 커서가 요소 영역 상의 X 좌표
ㅇ offsetY : 마우스 커서가 요소 영역 상의 Y 좌표
※ (키보드,마우스)
ㅇ mouse : 마우스 눌러진 버튼 (좌측 버튼 : 0, 가운데 : 1, 우측 : 2)
ㅇ key : 눌린 키의 값
ㅇ keyCode : 눌린 키의 코드
ㅇ altKey : Alt 키 눌려진 여부 (true : 눌려짐, false : 안 눌려짐)
ㅇ ctrlKey : Ctrl 키 눌려진 여부
ㅇ shiftKey : 시프트 키 눌려진 여부
ㅇ which : keypress 이벤트에서 눌려진 키 코드(수치값)
4. [자바스크립트] 이벤트 객체의 주요 `메소드`
※ (기본동작의 취소 : preventDefault)
ㅇ preventDefault() : 이벤트에 대한 웹브라우저의 기본동작 취소하기
- 예로써, 링크 클릭시 기본동작인 새 웹페이지 불러오기를 취소 함
- 이와 동일한 구현 방법은 , 이벤트 함수에서 false를 반환하면 됨
※ (이벤트 전달 정지 : stopPropagation, stopimmediatePropagation)
ㅇ stopPropagation() : 이벤트 버블링의 정지
ㅇ stopimmediatePropagation() : 이벤트 버블링의 즉시 정지
- 같은 요소의 다른 이벤트 리스너 실행까지도 멈춤