자바스크립트 - 이벤트 버블링: 초보자 가이드

안녕하세요, 미래의 자바스크립트 마법사 여러분! ? 오늘 우리는 이벤트 버블링의 세상으로 흥미로운 여정을 떠납니다. 이전에 들어본 적이 없더라도 걱정 마세요 - 이 튜토리얼이 끝나면 당신은 지식으로 터지게 될 것입니다! (이 장난을 봤나요? ?)

JavaScript - Event Bubbling

이벤트 버블링이란?

가족 모임에서 사촌형제에게 장난을 했을 때를 상상해 봅시다. 사촌형제가 웃으면, 이를 엿들은阿姨가 미소를 지으며, 할머니할아버지가 이를 듣고 웃음을 터뜨리는 것. 이것이 자바스크립트에서 이벤트 버블링과 비슷합니다!

기술적으로 이야기하면, 이벤트 버블링은 HTML DOM(문서 객체 모델) 트리에서 이벤트 전파의 방법입니다. 요소에서 이벤트가 발생하면, 먼저 해당 요소의 처리기가 실행되고, 그 다음 부모 요소에서 실행되고, 마지막으로 조상으로 올라가면서 전파됩니다.

간단한 예제로 이를 설명해 보겠습니다:

<div id="grandparent">
<div id="parent">
<button id="child">Click me!</button>
</div>
</div>

document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked!');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked!');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Grandparent clicked!');
});

버튼을 클릭하면 콘솔에 다음과 같은 내용을 볼 수 있습니다:

Child clicked!
Parent clicked!
Grandparent clicked!

이것이 이벤트 버블링의 작동입니다! 이벤트는 버튼(자식)에서 시작하여 부모, 마지막으로 조상으로 올라갑니다.

이벤트 버블링 단계

이제 기본 개념을 이해했으므로, 이벤트 버블링의 단계를 나누어 설명하겠습니다:

가장 깊은 요소(타겟 요소)에서 이벤트가 발생합니다.
타겟 요소의 이벤트 처리기가 실행됩니다.
이벤트가 부모 요소로 올라가고 그곳의 이벤트 처리기가 실행됩니다.
이 과정이 document 객체에 도달할 때까지 계속됩니다.

이것은 "parcel pass" 게임과 비슷합니다. DOM 트리를 따라 이동하면서 각 요소가 이벤트를 처리할 기회를 얻습니다.

2개의 중첩된 DIV를 사용한 이벤트 버블링

이제 두 개의 중첩된 div를 사용한 더 실践적인 예제를 보겠습니다:

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
Click me!
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('Inner div clicked');
});

안쪽 적색 div를 클릭하면 다음과 같은 내용을 볼 수 있습니다:

Inner div clicked
Outer div clicked

이벤트는 안쪽 div에서 시작하여 바깥쪽 div로 올라갑니다. 물이 떨어지는 연못처럼, 중심에서 시작하여 바깥으로 퍼집니다!

3개의 중첩된 레벨을 사용한 이벤트 버블링

이제 예제에 하나의 레벨을 더 추가해 보겠습니다:

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
Click me!
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Grandparent div clicked');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Parent div clicked');
});

document.getElementById('child').addEventListener('click', function() {
console.log('Child div clicked');
});

안쪽에서 가장 작은 적색 div를 클릭하면 다음과 같은 내용을 볼 수 있습니다:

Child div clicked
Parent div clicked
Grandparent div clicked

이것은 가족 계보와 같습니다 - 가장 어린 사람이 먼저 말하고, 부모가 그 다음, 마지막으로 할머니할아버지가 말합니다!

이벤트 버블링을 중지하는 방법

occasionally, you might want to stop this bubbling behavior. Maybe you don't want your grandparents to hear that joke after all! In JavaScript, we can do this using the stopPropagation() method:

document.getElementById('child').addEventListener('click', function(event) {
console.log('Child div clicked');
event.stopPropagation();
});

이제 자식 div를 클릭하면 다음과 같은 내용만 볼 수 있습니다:

Child div clicked

이벤트는 그 자리에서 멈춥니다, 병에 와인을 채우는 것처럼!

이벤트 처리에 유용한 메서드

이벤트 처리에 유용한 메서드 목록을 아래에 나열하겠습니다:

메서드	설명
`addEventListener()`	요소에 이벤트 처리기를 추가합니다
`removeEventListener()`	요소에서 이벤트 처리기를 제거합니다
`event.stopPropagation()`	이벤트가 DOM 트리를 올라가는 것을 중지합니다
`event.preventDefault()`	이벤트의 기본 동작을 방지합니다
`event.target`	이벤트를 트리거한 요소를 반환합니다
`event.currentTarget`	이벤트 리스너가 트리거된 요소를 반환합니다

결론

이제 이벤트 버블링에 대해 알아보았습니다. 이벤트 버블링을 이해하는 것은 웹 애플리케이션에서 복잡한 이벤트 처리를 관리하는 데 필수적입니다. 가족 모임에서의 가족 동정을 이해하는 것처럼, 누가 무엇을 듣고 언제 듣는지 알아야 혼란을 피할 수 있습니다!

이 예제를 연습하고, 다양한 중첩 구조를 실험하여 이벤트를 처리하는 프로가 되시길 바랍니다. 행복한 코딩 되세요, 그리고 이벤트가 항상 부드럽게 올라가길 바랍니다! ?

Credits: Image by storyset