이벤트 캡처(Event Capturing)란?
이벤트 캡처는 이벤트가 DOM 트리의 최상위 요소에서 시작해 실제 이벤트가 발생한 대상(target) 요소까지 순차적으로 내려오며 전달되는 이벤트 전파 방식입니다. 이는 반대로 대상 요소에서 최상위 요소 방향으로 이벤트가 올라가는 이벤트 버블링(Event Bubbling)과 정반대되는 개념입니다.
참고로 DOM의 이벤트 전파는 ① 캡처 단계(최상위 → 대상), ② 타깃 단계(대상 요소 도달), ③ 버블링 단계(대상 → 최상위)의 세 단계로 구성되며, 이벤트 캡처는 그중 첫 번째 단계에 해당합니다.
코드 상세 설명
다음 예제 코드에서는 body 영역에 세 개의 div 요소를 배치하고, CSS 스타일을 적용해 서로 중첩된 구조로 만들었습니다.
addEventListener()메서드를 사용해 각 div 태그에 이벤트 핸들러를 등록합니다.- 이때 등록하는 이벤트 유형은 "click" 이벤트입니다.
addEventListener()메서드는 세 개의 매개변수를 받습니다.
a) 첫 번째 매개변수: 처리할 이벤트 유형 — 여기서는 click 이벤트입니다.
b) 두 번째 매개변수: 이벤트 발생 시 실행될 이벤트 핸들러 함수 — 여기서는 알림(alert) 창을 띄우는 역할을 합니다.
c) 세 번째 매개변수: 전파 단계(phase)를 지정하는 값 — true를 지정하면 이벤트 캡처가 활성화되고, false를 지정하면 이벤트 버블링이 활성화됩니다.
- 알림 창을 표시하는 이벤트 핸들러 함수는
getAttribute()를 사용해 클릭된 div 요소의 id 값을 가져옵니다. - 가장 안쪽에 중첩된 div3 태그를 클릭하면, 이벤트 캡처가 활성화되어 있기 때문에 알림 메시지가 최상위 div1 태그부터 대상 태그인 div3까지 순서대로 표시됩니다.
- div2 태그를 클릭하면 최상위 div1 태그부터 대상 태그인 div2까지 알림 창이 차례로 나타납니다.
예제 코드
<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html>위 프로그램을 실행하면 화면에 다음과 같은 결과가 표시됩니다.
위 화면에서 div3(대상 요소)를 클릭하면 아래와 같은 출력 결과를 확인할 수 있습니다.
실행 결과
div1 알림 창에서 확인(OK)을 누르면 다음으로 div2 알림 창이 열립니다.
div2 알림 창에서 확인(OK)을 누르면 마지막으로 div3 알림 창이 열립니다.
이처럼 이벤트 캡처가 활성화되면 클릭된 대상 요소가 아니라 최상위 부모 요소부터 이벤트 핸들러가 먼저 실행되는 것을 확인할 수 있습니다. 반대 동작을 원한다면 addEventListener()의 세 번째 인자를 false로 변경해 이벤트 버블링 방식으로 전환하면 됩니다.