[javascript] 이벤트 객체의 속성 활용하기

14 Dec 2023

javascript

자바스크립트에서 이벤트가 발생하면 이벤트 핸들러 함수에는 이벤트 객체(event object)가 전달됩니다. 이벤트 객체는 이벤트에 대한 정보를 제공하며, 이를 활용하여 다양한 작업을 수행할 수 있습니다.

이벤트 객체의 기본 속성

document.addEventListener('click', function(event) {
  console.log(event.target); // 이벤트가 발생한 요소
  console.log(event.type); // 이벤트 타입
  console.log(event.clientX, event.clientY); // 마우스 클릭 좌표
});

예제: 마우스 이벤트 활용하기

클릭한 위치 확인하기

document.addEventListener('click', function(event) {
  console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
});

마우스 버튼 확인하기

document.addEventListener('click', function(event) {
  if (event.button === 0) {
    console.log('왼쪽 버튼 클릭');
  } else if (event.button === 2) {
    console.log('오른쪽 버튼 클릭');
  }
});

키보드 이벤트 처리

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    console.log('ESC 키 누름');
  }
});

이벤트 객체를 통해 클릭한 위치를 확인하거나 특정 키보드 입력을 감지할 수 있습니다. 이 외에도 이벤트 객체는 더 다양한 속성을 제공하므로, 필요에 따라 MDN Web Docs 등의 자료를 참고하여 활용할 수 있습니다.

이러한 자세한 정보를 찾아볼 때는 MDN Web Docs(https://developer.mozilla.org/ko/docs/Web/API/Event), 등의 자료들을 참고해보시기 바랍니다.