이벤트 객체

(2019-05-07)

자바스크립트 이벤트 객체, preventDefault()


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() : 이벤트 버블링의 즉시 정지
     - 같은 요소의 다른 이벤트 리스너 실행까지도 멈춤

JS 이벤트
   1. JS 이벤트   2. JS 이벤트 종류   3. JS 이벤트 객체   4. JS 이벤트 처리기   5. JS 이벤트 전파   6. 커스템 이벤트  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"