addEventListener() 메서드란?
JavaScript에서 addEventListener() 메서드는 HTML 요소에 이벤트 핸들러를 연결할 때 사용하는 대표적인 방법입니다. 기존의 인라인 이벤트 속성과 달리, 하나의 요소에 여러 개의 이벤트 핸들러를 추가할 수 있고 HTML과 JavaScript 코드를 분리하여 관리할 수 있어 코드 유지보수에 큰 도움이 됩니다.
기본 문법
element.addEventListener(event, function, useCapture);
- event: 처리할 이벤트 유형입니다. 예를 들어 'click', 'dblclick', 'mouseover' 등이 있습니다.
- function: 해당 이벤트가 발생했을 때 실행할 함수입니다.
- useCapture: 선택 사항으로, 캡처링 단계에서 이벤트를 처리할지 여부를 지정합니다(기본값은 false).
예제
다음 코드를 실행하면 버튼을 더블클릭할 때 현재 날짜와 시간이 화면에 표시되는 것을 확인할 수 있습니다. addEventListener() 메서드가 실제로 어떻게 동작하는지 직접 학습해 보세요.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 더블클릭해 보세요.</p>
<button id = "btnid"> Double Click </button>
<p id = "pid"> </p>
<script>
// btnid 요소에 dblclick 이벤트 핸들러 연결
document.getElementById("btnid").addEventListener("dblclick", displayEvent);
function displayEvent() {
// pid 요소에 현재 날짜와 시간 출력
document.getElementById("pid").innerHTML = Date();
}
</script>
</body>
</html>코드 설명
위 예제에서는 getElementById()로 버튼 요소를 가져온 뒤, addEventListener()를 사용해 'dblclick'(더블클릭) 이벤트를 등록했습니다. 사용자가 버튼을 더블클릭하면 displayEvent() 함수가 호출되어 Date()로 생성한 현재 날짜와 시간이 지정된 문단에 표시됩니다.
마무리
addEventListener() 메서드는 클릭, 키보드 입력, 마우스 이동 등 다양한 이벤트를 유연하게 처리할 수 있어 현대 JavaScript 개발에서 필수적으로 사용됩니다. 여러 이벤트 유형을 조합하여 실습해 보면 DOM 이벤트 처리에 대한 이해를 더욱 깊게 할 수 있습니다.