이벤트 객체

(2018-09-08)

자바스크립트 이벤트 객체

1. `이벤트 객체` 이란? 이벤트 발생시 전달되는 정보 임
     - 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
       . 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있음 
          .. 例) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 Ctrl,Alt,Shift 등의 키) 등


2. [자바스크립트]  이벤트 객체이벤트 리스너 함수의 인자(매개변수) 임
     - 이벤트에 대한 다양한 정보를 갖고 있어, 그에 따라 취할 동작을 달리 할 수 있음

  ※ 이벤트 객체를 다룰 때 유의할점
     - 웹브라우저 마다 다소 다르게 구현되므로 유의해야 함  ☞ jQuery 이벤트 참조


3. [자바스크립트]  이벤트 객체의 `속성`

  ㅇ screenX  : 마우스 커서가 모니터 왼쪽 경계로부터 떨어진 픽셀 거리
  ㅇ screenY  : 마우스 커서가 모니터 위쪽 경계로부터 떨어진 픽셀 거리
  ㅇ pageX    : 마우스 커서가 창 왼쪽 경계로부터 떨어진 픽셀 거리
  ㅇ pageY    : 마우스 커서가 창 위족 경계로부터 떨어진 픽셀 거리
  ㅇ offsetX  : 마우스 커서가 요소 영역 상의 X 좌표
  ㅇ offsetY  : 마우스 커서가 요소 영역 상의 Y 좌표
  ㅇ altKey   : Alt 키 눌려진 여부 (true : 눌려짐, false : 안 눌려짐)
  ㅇ ctrlKey  : Ctrl 키 눌려진 여부 
  ㅇ shiftKey : 시프트 키 눌려진 여부
  ㅇ which    : keypress 이벤트에서 눌려진 키 코드(수치값)

  ㅇ target   : 이벤트를 발생시킨 요소를 가리킴 
     - 이벤트 타깃이 되는 객체를 가리킴
     - 例) event.target.id : 이벤트 발생된 해당 객체의 id 값을 나타냄
  ㅇ currentTarget : 이벤트 버블링 단계에서의 현재 요소를 가리킴
  ㅇ delegateTarget : 위임 처리하는 요소를 가리킴


4. [자바스크립트]  이벤트 객체의 `메소드`

  ㅇ preventDefault()  : 이벤트에 대한 웹브라우저의 기본동작 취소하기
     - 예로써, 링크 클릭시 기본동작인 새 웹페이지 불러오기를 취소 함
     - 이와 동일한 구현 방법은 , 이벤트 함수에서 false를 반환하면 됨
  ㅇ stopPropagation() : 이벤트 버블링의 정지
  ㅇ stopimmediatePropagation() : 이벤트 버블링의 정지
     - 같은 요소의 다른 이벤트 리스너 실행까지도 멈춤


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류 3. JS 이벤트 객체

 
        최근수정     요약목록(시험중)     참고문헌