이벤트 객체

지난 시간에 다뤘던 이벤트 핸들러와 이벤트 리스너는 인수로 이벤트 객체라는 것을 받습니다. 이 이벤트 객체를 통해 핸들러와 리스너 내부에서 이벤트 발생에서 얻을 수 있는 정보들을 얻을 수 있습니다.

<button id='btn'>버튼</button>
document.getElementById('btn').addEventListener('click', function(e) {
  //수행될 이벤트
}, false);

위 코드에서 두 번째 인자인 리스너에 전달된 e가 바로 이벤트 객체입니다. 만약 이벤트에 정보를 이용할 예정이라면 인수로 e를 주게되면 됩니다.

e는 루프 변수 i, j, k나 요소 v 처럼 관용적으로 사용되는 이름입니다.


이벤트 객체의 멤버

멤버설명
bubbles이벤트가 버블링 여부
cancelable이벤트가 취소 여부
currentTarget이벤트 버블에서 현재 요소를 취득
defaultPreventpreventDefault 메소드의 호출 여부
eventPhase이벤트의 흐름이 어느 단계에 있는가
tartget이벤트 발생 요소
type이벤트의 종류
timeStamp이벤트의 작성 일시 취득
  • 버블링: 버블링은 자바스크립트가 이벤트가 발생한 요소에서 상위 요소로 전달되는 단계입니다. 다른 포스트에서 다룰 예정이므로 여기서는 간단하게만 알아둡시다.
  • type의 이벤트 종류라는 것은 click, mouseover 등의 이벤트를 의미합니다.

멤버설명
screenX스크린의 이벤트 발생 X좌표
screenY스크린의 이벤트 발생 Y좌표
pageX페이지의 이벤트 발생 X좌표
pageY페이지의 이벤트 발생 Y좌표
clientX브라우저의 이벤트 발생 X좌표
clientY브라우저의 이벤트 발생 Y좌표
offsetX요소의 이벤트 발생 X좌표
offsetY요소의 이벤트 발생 Y좌표

  • page는 웹 페이지의 문서 전체를 기준으로 삼습니다. 그래서 스크롤이 있다면 스크롤까지 포함되어서 좌표를 반환합니다. 반면, client는 브라우저의 표시 영역에 대해 좌표를 반환하기 때문에 스크롤은 포함되지 않는다는 차이점이 있습니다.

    그림에선 page가 client보다 크다는 느낌으로 그렸는데, 이건 이해를 돕기 위해서고 실제로는 문서의 크기에 따라 page가 client보다 더 클수도, 더 작을수도 있습니다.


멤버설명
button마우스의 어떤 버튼이 눌렸는가
key눌린 키의 값
ketCode눌린 키의 코드
ctrlKeyctrl 키의 눌림 여부
altKeyalt 키의 눌림 여부
shiftKeyshift 키의 눌림 여부
metaKeymeta 키의 눌림 여부
  • button은 마우스의 어떤 버튼이 눌렸는 지를 반환하는데, 일반적으로 마우스는 왼쪽, 휠, 오른쪽 세 개의 버튼을 갖고 있습니다. 이때 왼쪽은 0, 휠은 1, 오른쪽은 2를 반환합니다.
  • meta 키: 윈도우 환경의 키보드는 윈도우 버튼, 맥 환경의 키보드는 커맨드 버튼을 의미합니다.

0개의 댓글