JavaScript에서 이벤트를 처리하려면 addEventListener() 메서드를 사용하는 것이 가장 표준적인 방법입니다. 예를 들어, 요소에 마우스 클릭 이벤트를 바인딩하려면 'click' 이벤트 타입을 지정하면 됩니다.
addEventListener() 메서드란?
addEventListener()는 특정 HTML 요소에 이벤트 리스너를 등록하는 메서드로, 다음과 같은 형식으로 사용합니다.
element.addEventListener(eventType, callbackFunction);
- eventType: 'click', 'mouseover', 'keydown' 등 처리할 이벤트의 종류
- callbackFunction: 이벤트가 발생했을 때 실행할 함수
예제 코드
아래 코드를 실행하여 JavaScript로 클릭 이벤트를 바인딩하고 처리하는 방법을 직접 확인해 보세요. 링크를 클릭하면 알림 창이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<a href="#" id="anchor">Click me</a>
<script>
document.getElementById('anchor').addEventListener('click', function() {
alert('링크를 클릭했습니다!');
});
</script>
</body>
</html>코드 설명
- document.getElementById('anchor') – id가 'anchor'인 앵커 요소를 선택합니다.
- addEventListener('click', ...) – 해당 요소에 클릭 이벤트 리스너를 등록합니다.
- alert() – 사용자가 링크를 클릭하면 알림 창이 화면에 표시됩니다.
참고 사항
addEventListener()를 사용하면 하나의 요소에 여러 개의 이벤트 핸들러를 중복 없이 등록할 수 있으며, 필요할 때 removeEventListener()로 손쉽게 제거할 수도 있습니다. 또한 HTML 태그 안에 인라인 onclick 속성을 넣는 방식보다 코드와 구조를 분리할 수 있어 유지보수에 유리합니다.