웹 페이지에서 상호작용을 위해 DOM 요소에 이벤트를 등록하는 것은 매우 중요합니다. JavaScript를 사용하여 DOM 이벤트 리스너를 등록하는 방법을 살펴보겠습니다.

이벤트 리스너 등록하기

DOM 요소에 이벤트 리스너를 등록하는 가장 일반적인 방법은 addEventListener 메소드를 사용하는 것입니다.

다음은 버튼 클릭에 대한 이벤트 리스너를 등록하는 예제입니다:

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

위의 코드에서, 버튼 클릭 시에 경고창이 표시되도록 이벤트 리스너가 등록되었습니다.

이벤트 핸들러

이벤트 리스너로 등록된 함수는 이벤트 핸들러 또는 콜백 함수로 알려져 있습니다. 이벤트가 발생하면 콜백 함수가 실행됩니다.

이벤트 유형

addEventListener 메소드는 첫 번째 인자로 이벤트 유형을 받습니다. 이벤트 유형은 ‘click’, ‘mouseover’, ‘keydown’ 등의 문자열로 지정됩니다.

요약

JavaScript의 addEventListener 메소드를 사용하여 DOM 이벤트 리스너를 등록하는 방법에 대해 알아보았습니다. 이것은 사용자 상호작용과 웹 애플리케이션 동작을 제어하는 데 매우 중요한 기능입니다.

더 많은 정보를 알고 싶다면 MDN 웹 문서(https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener)를 확인해 보세요.