JavaScript에서 동일한 요소에 두 개 이상의 이벤트 핸들러를 추가하려면 addEventListener() 메서드를 여러 번 호출하면 됩니다. 추가하고 싶은 이벤트 핸들러의 수만큼 각각 addEventListener()를 등록해 주면 됩니다.
addEventListener()의 가장 큰 장점은 기존에 등록된 이벤트 핸들러를 덮어쓰지 않고 새로운 핸들러를 계속 추가할 수 있다는 점입니다. 따라서 하나의 버튼에 클릭(click) 이벤트와 더블클릭(dblclick) 이벤트처럼 서로 다른 이벤트를 동시에 연결할 수 있습니다.
예제
아래 코드를 실행해 보면 하나의 버튼에 여러 이벤트 핸들러를 추가하는 방법을 확인할 수 있습니다. 버튼을 한 번 클릭하면 현재 날짜가 표시되고, 두 번 클릭(더블클릭)하면 알림 창이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 한 번 클릭하면 날짜가 표시됩니다.</p>
<p>아래 버튼을 두 번 클릭하면 알림 창이 나타납니다.</p>
<button id="btnid"> 클릭하세요 </button>
<p id="pid"></p>
<script>
document.getElementById("btnid").addEventListener("click", displayEvent);
var res = document.getElementById("btnid");
res.addEventListener("dblclick", myFunction);
function displayEvent() {
document.getElementById("pid").innerHTML = Date();
}
function myFunction() {
alert ("버튼을 두 번 클릭했습니다!");
}
</script>
</body>
</html>
핵심 정리
addEventListener()는 기존 핸들러를 덮어쓰지 않으므로 같은 요소에 원하는 만큼 핸들러를 추가할 수 있습니다.- 같은 요소에 서로 다른 이벤트 타입뿐 아니라 동일한 이벤트 타입에 여러 개의 핸들러를 등록하는 것도 가능합니다.
- 등록된 순서대로 핸들러가 실행되며, 불필요한 핸들러는
removeEventListener()로 제거할 수 있습니다. - 구형 Internet Explorer 8 이하에서는
attachEvent()를 사용해야 했지만, 현재 모든 주요 브라우저는addEventListener()를 지원합니다.