JavaScript는 addEventListener() 메서드를 통해 지정된 요소에 이벤트 핸들러(event handler)를 연결할 수 있습니다. 이 메서드의 가장 큰 장점은 기존에 등록된 이벤트 핸들러를 덮어쓰지 않고 새로운 핸들러를 추가할 수 있다는 점입니다.
또한 하나의 요소에 여러 개의 이벤트 핸들러를 동시에 등록할 수 있으며, 버블링(bubbling) 단계에서 이벤트가 어떻게 반응할지 세밀하게 제어할 수 있습니다. mouseover, click 등 다양한 종류의 이벤트를 자유롭게 적용할 수 있습니다.
addEventListener() 메서드의 주요 특징
- 기존 이벤트 핸들러를 덮어쓰지 않고 새 핸들러를 추가합니다.
- 하나의 요소에 여러 개의 이벤트 핸들러를 동시에 등록할 수 있습니다.
- 캡처링과 버블링 단계를 선택적으로 제어할 수 있습니다.
예제
다음 예제에서는 버튼에 mouseover 이벤트를 등록합니다. 마우스를 버튼 위에 올리면 화면에 지정된 텍스트가 출력됩니다.
<html>
<body>
<p>이 예제는 addEventListener() 메서드를 사용하여 버튼에 mouseover 이벤트를 연결합니다.</p>
<input type = "button" id="myBtn" value = "listener">
<p id="listener"></p>
<script>
document.getElementById("myBtn").addEventListener("mouseover", displayText);
function displayText() {
document.getElementById("listener").innerHTML =
document.write("Tutorix is the best e-learning platform");
}
</script>
</body>
</html>위 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 "listener" 버튼 위로 마우스를 올리면(mouseover) 아래와 같은 결과가 실행됩니다.
실행 결과
