웹 개발을 하다 보면 이벤트 캡처링(Event Capturing)이라는 용어를 종종 듣게 될 것입니다. 이벤트 캡처링은 웹 페이지에서 발생하는 이벤트를 효율적으로 처리하기 위한 중요한 개념 중 하나입니다.
이벤트 캡처링이란?
이벤트 캡처링은 DOM 요소에서 이벤트가 시작되어 가장 먼 조상 요소에서부터 해당 요소까지 이벤트를 전파하는 방식을 말합니다. 이벤트가 특정 요소에서 발생했을 때, 이벤트 캡처링은 가장 상위 요소에서 시작하여 해당 요소까지 내려오는 반면, 이벤트 버블링(Event Bubbling)은 해당 요소에서 시작하여 최상위 요소까지 올라가는 방식을 의미합니다.
이벤트 캡처링 이해하기
간단한 HTML과 JavaScript를 이용하여 이벤트 캡처링을 이해해 봅시다.
<!DOCTYPE html>
<html>
<head>
<title>이벤트 캡처링</title>
</head>
<body>
<div id="outer">
<div id="inner">
내부 요소
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('outer 요소 클릭');
}, true);
document.getElementById('inner').addEventListener('click', function() {
console.log('inner 요소 클릭');
}, true);
</script>
</body>
</html>
이 코드는 두 개의 div 요소를 가지고 있습니다. 외부 div(outer)와 내부 div(inner)가 있고, 두 요소에 각각 클릭 이벤트 리스너가 추가되어 있습니다. 두 리스너 모두 이벤트 캡처링을 사용하기 위해 세 번째 매개변수로 true를 전달했습니다.
머리글에 따르면, 만약 내부 div를 클릭한다면 어떠한 결과가 나타날까요? 이벤트 캡처링의 특성에 따라 inner 요소의 클릭 이벤트가 발생했을 때, 가장 먼 조상 요소부터 해당 요소까지 이벤트가 전파되어야 하므로, outer 요소의 클릭 이벤트 리스너가 먼저 동작하고, 그 후에 inner 요소의 클릭 이벤트 리스너가 동작하게 됩니다.
결론
이벤트 캡처링은 이벤트 처리 및 전파의 흐름을 이해하는 데 도움을 주는 중요한 개념입니다. 이를 활용하여 복잡한 이벤트 처리 시나리오를 구현할 수 있으며, 웹 애플리케이션의 성능 향상과 유지보수성을 높일 수 있습니다. 따라서 웹 개발자들은 이벤트 캡처링에 대한 이해를 바탕으로 효율적인 이벤트 처리를 위한 전략을 고민해보는 것이 좋습니다.
참고 문헌: