[javascript] 이벤트 객체 사용하기

14 Dec 2023

javascript

자바스크립트에서 이벤트가 발생하면 해당 이벤트에 대한 정보를 담고 있는 이벤트 객체가 생성됩니다. 이벤트 객체를 통해 이벤트에 대한 세부 정보를 확인하고 처리할 수 있습니다.

이벤트 객체의 기본 속성

각 이벤트마다 고유한 이벤트 객체가 있으며, 해당 객체에는 다양한 속성이 존재합니다. 가장 일반적으로 사용되는 이벤트 객체의 속성은 다음과 같습니다:

type: 이벤트의 유형을 나타내는 문자열
target: 이벤트가 발생한 요소
currentTarget: 이벤트가 발생한 현재 요소
timeStamp: 이벤트가 발생한 시각
기타 추가적인 속성들

이벤트 객체 사용 예시

다음은 간단한 HTML 요소를 클릭할 때 이벤트 객체를 이용하여 클릭한 요소의 정보를 출력하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>이벤트 객체 예시</title>
</head>
<body>
  <button id="myButton">클릭해주세요</button>

  <script>
    document.getElementById('myButton').addEventListener('click', function(event) {
      console.log('클릭된 요소: ', event.target);
      console.log('이벤트가 발생한 요소: ', event.currentTarget);
      console.log('이벤트 유형: ', event.type);
      console.log('이벤트 발생 시각: ', event.timeStamp);
    });
  </script>
</body>
</html>

이렇게 작성된 코드를 실행하고 해당 버튼을 클릭하면, 브라우저 콘솔에서 클릭한 요소와 이벤트 정보가 출력될 것입니다.

이렇게 이벤트 객체를 활용하면 핸들러 함수 안에서 발생한 이벤트에 대한 다양한 정보를 확인하고 이를 활용할 수 있습니다.

이처럼 이벤트 객체를 적절히 활용하여 웹 애플리케이션의 사용자 상호작용에 대한 세밀한 제어를 할 수 있습니다.

이벤트 객체의 기본 속성

이벤트 객체 사용 예시

참고 자료