이벤트 핸들러를 작성할 때 종종 이벤트 객체에 대한 정보가 필요합니다. 이벤트 객체는 브라우저에서 이벤트가 발생했을 때 전달되는 객체로, 해당 이벤트에 대한 정보를 제공합니다. 이를 통해 이벤트의 속성을 활용하여 유용한 동작을 수행할 수 있습니다.

이벤트 객체의 기본 속성

모든 이벤트 객체는 동일한 기본 속성을 갖습니다. 주요 속성은 다음과 같습니다.

• type: 이벤트의 종류를 나타내는 문자열
• target: 이벤트가 발생한 요소를 가리키는 참조
• currentTarget: 이벤트 핸들러가 바인딩된 요소를 가리키는 참조
• timeStamp: 이벤트가 발생한 시각을 나타내는 타임스탬프

이벤트 객체 속성 활용하기

예를 들어, 클릭 이벤트의 경우 event.target을 통해 실제로 클릭된 요소를 확인할 수 있습니다. 또한, 폼 제출(submit) 이벤트에서는 폼 요소의 값을 가져오기 위해 event.target을 사용할 수 있습니다.

document.querySelector("#myButton").addEventListener('click', function(event) {
  console.log("클릭된 요소:", event.target);
});

위 예제에서는 click 이벤트 핸들러 내에서 event.target 속성을 이용하여 실제로 클릭된 요소에 접근하고 있습니다.

이벤트 객체의 속성을 활용하여 동적으로 요소를 조작하거나 특정 동작을 수행할 수 있습니다.

이렇듯, 이벤트 객체의 속성을 잘 활용하면 다양하고 유용한 이벤트 핸들링을 구현할 수 있습니다.

결론

이벤트 객체의 속성은 이벤트 핸들러에서 이벤트에 대한 추가 정보를 얻고 다양한 동작을 수행하는 데 사용될 수 있습니다. 이를 활용하여 보다 동적이고 유연한 웹 애플리케이션을 개발할 수 있습니다.

더 많은 이벤트 객체의 속성과 활용법에 대해서는 MDN 웹 문서를 참고하시기 바랍니다.