JavaScript - 이벤트 캡처링: 초보자 가이드
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 이벤트 캡처링의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해본 적이 없더라도 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 이 개념을 단계별로 함께 탐구해보겠습니다. 그럼 좋아하는 음료를 한 잔 챙기고, 시작해보겠습니다!
이벤트 캡처링이란?
복잡한 내용에 들어가기 전에 간단한 비유로 시작해보겠습니다. 가족 모임에서 귀여운 작은 사촌이 웃음을 자아내는 말을 했을 때를 생각해보세요. 웃음은 할머니할아버지(가장 연장자)부터 시작하여 부모님, 마지막으로 당신에게로 이어집니다. 이것이 JavaScript에서 이벤트 캡처링이 작동하는 방식과 비슷합니다!
웹 개발의 세계에서 이벤트 캡처링은 이벤트가 가장 외부의 요소에서 먼저 캡처되고 이후 내부 요소로 전파되는 이벤트 전파의 단계입니다. 이는 "parcel pass" 놀이처럼, 하지만 이벤트를 전파하는 방식입니다!
이제 이를 더 기술적인 용어로 설명해보겠습니다:
- 웹 페이지에서 이벤트가 발생할 때(예: 클릭), 그것은 클릭한 요소에서만 발생하는 것이 아닙니다.
- 이벤트는 DOM(문서 객체 모델) 트리의 상단에서 시작합니다.
- 그런 다음 부모 요소를 통해 이동하여 대상 요소에 도달합니다.
- 이 하강 경로가 "이벤트 캡처링"입니다.
기본 이벤트 캡처링 예제
이제 이벤트 캡처링이 어떻게 작동하는지 보기 위해 기본적인 예제를 살펴보겠습니다. 간단한 HTML 구조를 만들고, 이를 통해 캡처링이 어떻게 작동하는지 보여주는 JavaScript를 추가하겠습니다.
<div id="outer">
<div id="middle">
<div id="inner">Click me!</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('Outer div clicked');
}, true);
middle.addEventListener('click', function() {
console.log('Middle div clicked');
}, true);
inner.addEventListener('click', function() {
console.log('Inner div clicked');
}, true);
</script>이 예제에서 우리는 세 개의 중첩된 <div> 요소를 가지고 있습니다. JavaScript 코드는 각 div에 클릭 이벤트 리스너를 추가합니다. addEventListener의 true 매개변수는 이벤트 캡처링을 활성화합니다.
가장 내부의 div를 클릭하면 콘솔에 다음과 같은 출력을 볼 수 있습니다:
Outer div clicked
Middle div clicked
Inner div clicked이는 이벤트가 가장 외부 요소에서 시작하여 가장 내부 요소로 이동하는 것을 보여줍니다. 이벤트가 각 부모 요소에게 "안녕하세요!"라고 말하는 것과 같습니다.
기본 동작 방지 예제
때로는 이벤트의 기본 동작을 중지하고 싶을 수 있습니다. 예를 들어, 폼이 제출되지 않도록 하거나 링크가 따라가지 않도록 하려면 어떻게 할 수 있을까요? 이를 이벤트 캡처링과 함께 수행하는 방법을 보겠습니다:
<div id="container">
<a href="https://www.example.com" id="link">Click me!</a>
</div>
<script>
const container = document.getElementById('container');
const link = document.getElementById('link');
container.addEventListener('click', function(event) {
console.log('Container clicked');
event.preventDefault();
}, true);
link.addEventListener('click', function(event) {
console.log('Link clicked');
}, true);
</script>이 예제에서 우리는 링크가 컨테이너 div 내에 있습니다. 컨테이너의 이벤트 리스너는 event.preventDefault()를 사용하여 링크의 기본 동작을 중지합니다.
링크를 클릭하면 다음과 같은 출력을 볼 수 있습니다:
Container clicked
Link clicked하지만 링크는 실제로 URL로 이동하지 않습니다. 컨테이너가 "아니, 우리는 여기서 머물러 있을게!"라고 말하는 것과 같습니다.
이벤트 전파 중지 예제
때로는 이벤트가 DOM 트리를 더 이상 내려가지 않도록 중지하고 싶을 수 있습니다. 이를 위해 event.stopPropagation()를 사용할 수 있습니다. 어떻게 하는지 보겠습니다:
<div id="grandparent">
<div id="parent">
<div id="child">Click me!</div>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');
grandparent.addEventListener('click', function(event) {
console.log('Grandparent clicked');
}, true);
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
event.stopPropagation();
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
}, true);
</script>이 가족 주제의 예제에서, 가장 내부의 div를 클릭하면 다음과 같은 출력을 볼 수 있습니다:
Grandparent clicked
Parent clicked이벤트는 부모에서 중지되어 자식에 도달하지 않습니다. 부모가 "이제까지 이리로 가지 마!"라고 말하는 것과 같습니다.
결론
이제 이벤트 캡처링의 기본 개념에서 기본 동작 방지와 전파 중지까지 여정을 함께 완료했습니다. 이벤트 캡처링은 JavaScript에서 이벤트 흐름의 일부입니다. 이는 주요 이벤트(pun intended) 전에 열리는 오프닝 액트와 같습니다.
이제 사용한 방법们的 빠른 요약을 보겠습니다:
| 방법 | 설명 |
|---|---|
addEventListener(event, function, useCapture) |
요소에 이벤트 처리기를 추가합니다. useCapture를 true로 설정하면 이벤트 캡처링이 활성화됩니다. |
event.preventDefault() |
이벤트의 기본 동작을 중지합니다. |
event.stopPropagation() |
이벤트가 DOM 트리를 더 이상 상승하지 않도록 중지합니다. 부모 처리기를 알리지 않습니다. |
이 개념들을 연습하고, 코드를 조작해보세요. 이렇게 하면 이벤트를 프로처럼 캡처할 수 있을 것입니다! 프로그래밍에서도, 생활에서도 여정이 목적지와 같이 중요합니다. 행복하게 코딩하고, 이벤트가 항상 잘 캡처되기를 바랍니다!
Credits: Image by storyset