[JavaScript] 이벤트 객체의 프로퍼티

Moon·2024년 12월 24일

JavaScript | 심화

목록 보기

22/35

이벤트 객체는 이벤트가 발생했을 때 자동으로 생성되며, 관련된 정보를 담고 있다. 이 객체는 이벤트 핸들러의 첫 번째 파라미터로 전달되며, 이벤트 타입에 따라 포함된 프로퍼티가 다르다. 이번 글에는 자주 사용되는 이벤트 객체의 프로퍼티를 정리한다.

공통 프로퍼티

이 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체에 포함되어 있다.

type: 이벤트 이름을 나타냄. 예를 들어 'click', 'keydown', 'mouseover' 등이 있다.
target: 이벤트가 발생한 요소를 가리킴.
currentTarget: 이벤트 핸들러가 등록된 요소를 가리킴.
timeStamp: 이벤트가 발생한 시간을 밀리초 단위로 제공 (페이지가 로드된 이후 경과한 시간).
bubbles: 이벤트가 버블링 단계인지 여부를 나타내는 불리언 값.

마우스 이벤트 관련 프로퍼티

마우스 이벤트는 마우스 클릭, 이동, 드래그 등과 관련된 프로퍼티를 제공한다.

button: 누른 마우스 버튼을 나타냄.
- 0: 왼쪽 버튼
- 1: 가운데 버튼(휠)
- 2: 오른쪽 버튼
clientX, clientY: 브라우저 표시 영역에서 마우스 커서의 위치.
pageX, pageY: 문서 전체에서 마우스 커서의 위치.
offsetX, offsetY: 이벤트 발생 요소를 기준으로 한 마우스 커서의 위치.
screenX, screenY: 모니터 화면 내 마우스 커서의 위치.
altKey, ctrlKey, shiftKey, metaKey: 특정 키(Alt, Ctrl, Shift, Meta)가 눌렸는지 여부를 나타내는 불리언 값.

키보드 이벤트 관련 프로퍼티

키보드 이벤트는 키를 누르거나 떼는 동작과 관련된 정보를 제공한다.

key: 누른 키의 값을 나타냄. 예: 'a', 'Enter'.
code: 누른 키의 물리적 위치를 나타냄. 예: 'KeyA', 'Enter'.
altKey, ctrlKey, shiftKey, metaKey: 마우스 이벤트와 동일하게, 특정 키가 눌렸는지 여부를 나타냄.

코드 예제

키보드 이벤트 예제

const input = document.querySelector("input");

input.addEventListener("keydown", (event) => {
  console.log(`Key: ${event.key}`); // 누른 키의 값
  console.log(`Code: ${event.code}`); // 키의 물리적 위치
  console.log(`Alt: ${event.altKey}, Ctrl: ${event.ctrlKey}, Shift: ${event.shiftKey}`);
});

마우스 이벤트 예제

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log(`Button: ${event.button}`); // 누른 마우스 버튼
  console.log(`ClientX: ${event.clientX}, ClientY: ${event.clientY}`); // 브라우저 기준 위치
  console.log(`Target: ${event.target.tagName}`); // 이벤트 발생 요소
});