자바스크립트에서 이벤트 핸들러를 등록하는 것은 웹 개발에서 중요한 부분입니다. 이를 통해 버튼 클릭, 마우스 움직임, 키 입력 등과 같은 사용자 상호작용에 반응할 수 있습니다. 이번 블로그에서는 자바스크립트를 사용하여 이벤트 핸들러를 등록하는 방법에 대해 알아보겠습니다.

1. HTML 요소에 이벤트 핸들러 등록하기

HTML 요소에 이벤트 핸들러를 등록하는 가장 기본적인 방법은 요소의 속성에 직접 이벤트 핸들러를 지정하는 것입니다. 예를 들어, 버튼을 클릭했을 때 특정 동작을 수행하도록 하려면 다음과 같이 onclick 속성을 사용할 수 있습니다.

<button onclick="myFunction()">클릭</button>

2. 자바스크립트로 이벤트 핸들러 등록하기

이벤트 핸들러를 더 유연하게 등록하려면 자바스크립트를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 예를 들어, 아래와 같이 이벤트 핸들러를 자바스크립트로 직접 등록할 수 있습니다.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

3. 이벤트 객체 활용하기

이벤트 핸들러 함수 내에서 이벤트 객체를 활용하여 이벤트와 관련된 정보를 얻을 수 있습니다. 예를 들어, 아래와 같이 이벤트 객체를 활용하여 마우스 위치 정보를 얻을 수 있습니다.

document.addEventListener('mousemove', function(event) {
  console.log(`마우스 위치: (${event.clientX}, ${event.clientY})`);
});

이러한 방법을 통해 자바스크립트로 이벤트 핸들러를 등록하고 관리하는 방법에 대해 알아보았습니다. 이를 통해 웹 페이지의 상호작용을 향상시키고 사용자 경험을 개선할 수 있습니다.

참고: MDN Web Docs - 이벤트 핸들러