웹 페이지 상에서 사용자의 상호작용을 처리하기 위해서는 이벤트를 다루어야 합니다. 자바스크립트를 사용하여 DOM 요소에서 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. 이벤트 핸들러 등록

이벤트 핸들러는 이벤트가 발생했을 때 실행될 함수를 가리킵니다. 가장 기본적인 방법은 HTML 요소의 onclick, onchange, onsubmit 등의 속성을 이용하는 것이지만, 이 방법은 코드의 가독성과 유지보수에 불편함을 초래합니다.

보다 관련된 방법은 addEventListener 메서드를 사용하는 것입니다. 다음은 버튼 클릭에 반응하는 이벤트 핸들러를 등록하는 예시입니다.

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  alert('버튼이 클릭되었습니다!');
});

이런 방식을 사용하면 여러 개의 이벤트 핸들러를 등록할 수 있고, 기존의 이벤트 핸들러를 덮어쓰지 않고 추가할 수 있습니다.

2. 이벤트 객체

이벤트 핸들러에 전달되는 이벤트 객체에는 이벤트와 관련된 정보와 동작을 제어하는 메서드가 담겨 있습니다. 주요 속성으로는 target (이벤트가 발생한 요소), type (이벤트의 종류), currentTarget (이벤트를 처리하는 요소) 등이 있습니다.

예를 들어, 다음 코드는 마우스가 해당 요소 위에 있을 때 배경색을 변경하고, 벗어날 때 원래대로 돌리는 방법을 보여줍니다.

const element = document.querySelector('#myElement');
element.addEventListener('mouseover', function(event) {
  event.target.style.backgroundColor = 'red';
});

element.addEventListener('mouseout', function(event) {
  event.target.style.backgroundColor = '';
});

이와 같은 방식으로, 이벤트 객체를 활용하여 사용자 상호작용에 반응하는 웹 애플리케이션을 구현할 수 있습니다.

이렇게 자바스크립트를 사용하여 DOM 요소의 이벤트를 처리하는 방법에 대해 간략히 살펴보았습니다. 이는 웹 프론트엔드 개발시에 매우 중요한 부분이므로 잘 숙지해두시기를 권장합니다.