JavaScript에서 이벤트 전파란 무엇이며 왜 이해해야 할까

 웹 페이지에서 사용자의 행동은 대부분 이벤트라는 형태로 처리된다. 버튼 클릭, 마우스 이동, 키보드 입력과 같은 동작은 모두 브라우저가 감지하여 자바스크립트로 전달한다. 그런데 하나의 요소에서 발생한 이벤트가 해당 요소에서만 처리되는 것은 아니다. 실제로는 부모 요소와 자식 요소 사이를 이동하며 순차적으로 처리된다. 이 과정을 이벤트 전파라고 부른다. 이벤트 전파 개념을 이해하지 못하면 의도하지 않은 동작이 발생하거나, 코드가 복잡해질 수 있다. 이 글에서는 자바스크립트 이벤트 전파의 기본 개념부터 동작 방식, 그리고 실제 개발에서 왜 중요한지를 차분하게 정리한다.

1. 이벤트 전파의 기본 개념

이벤트 전파란 하나의 이벤트가 발생했을 때,
해당 이벤트가 여러 HTML 요소를 거쳐 전달되는 과정을 의미한다.

예를 들어 버튼이 div 안에 들어 있는 구조라면,
버튼을 클릭했을 때 이벤트는 버튼에서 끝나지 않는다.
부모 요소와 상위 요소에도 영향을 미칠 수 있다.

이러한 동작 방식은 브라우저의 기본 설계에 포함된 개념이다.

2. HTML 구조와 이벤트의 관계

다음과 같은 구조를 생각해볼 수 있다.

<div id="container">
  <button id="btn">클릭</button>
</div>

이 구조에서 버튼을 클릭하면

  • 버튼 요소

  • div 요소

  • document 객체

순서로 이벤트가 전달된다.

이 흐름을 이해하는 것이 이벤트 전파의 출발점이다.

3. 이벤트 전파의 세 가지 단계

자바스크립트에서 이벤트는 다음 세 단계를 거쳐 처리된다.

  1. 캡처링 단계

  2. 타깃 단계

  3. 버블링 단계

이 세 단계는 항상 같은 순서로 진행된다.

4. 캡처링 단계란 무엇인가

캡처링 단계는 이벤트가 가장 바깥 요소에서 시작해,
이벤트가 발생한 실제 요소로 내려오는 과정이다.

이 단계에서는

  • document

  • html

  • body

  • 상위 요소

순으로 이벤트가 전달된다.

기본적으로 캡처링 단계에서는
이벤트가 처리되지 않는 경우가 많다.

5. 타깃 단계의 의미

타깃 단계는
이벤트가 실제로 발생한 요소에 도달한 상태를 의미한다.

버튼을 클릭했다면,
이 단계에서 버튼 요소가 이벤트의 중심이 된다.

이 시점에서 등록된 이벤트 핸들러가 실행된다.

6. 버블링 단계의 동작 방식

버블링 단계는
이벤트가 타깃 요소에서 다시 위로 올라가는 과정이다.

즉,

  • 버튼

  • 부모 div

  • body

  • document

순으로 이벤트가 전파된다.

자바스크립트에서 대부분의 이벤트 처리는
이 버블링 단계를 기준으로 동작한다.

7. 이벤트 버블링 예제 코드

다음은 간단한 버블링 예제이다.

const container = document.getElementById("container");
const button = document.getElementById("btn");

container.addEventListener("click", function () {
  console.log("container 클릭");
});

button.addEventListener("click", function () {
  console.log("button 클릭");
});

이 상태에서 버튼을 클릭하면
콘솔에는 다음 순서로 출력된다.

  1. button 클릭

  2. container 클릭

이는 이벤트가 버블링 단계에서
부모 요소로 전달되기 때문이다.

8. 이벤트 전파를 이해해야 하는 이유

이벤트 전파를 이해하지 못하면
다음과 같은 문제가 발생할 수 있다.

  • 원하지 않는 이벤트 중복 실행

  • 부모 요소의 이벤트가 예기치 않게 동작

  • 코드 흐름을 파악하기 어려움

특히 리스트, 카드 UI, 메뉴 구조처럼
중첩된 요소가 많은 화면에서는
이벤트 전파 이해가 필수적이다.

9. 이벤트 전파를 제어하는 방법

자바스크립트에서는
이벤트 전파를 제어할 수 있는 방법을 제공한다.

button.addEventListener("click", function (event) {
  event.stopPropagation();
});

stopPropagation()을 사용하면
이벤트가 더 이상 부모 요소로 전달되지 않는다.

이 방법은
특정 요소에서만 이벤트를 처리해야 할 때 유용하다.

10. 이벤트 위임과의 관계

이벤트 전파 개념은
이벤트 위임이라는 패턴의 기반이 된다.

이벤트 위임이란
부모 요소 하나에만 이벤트를 등록하고,
자식 요소의 이벤트를 함께 처리하는 방식이다.

이 방식은

  • 코드량 감소

  • 동적 요소 처리 용이

  • 성능 관리에 유리

라는 장점을 가진다.

11. 이벤트 전파 이해 시 주의할 점

이벤트 전파를 다룰 때는
다음 사항을 항상 고려해야 한다.

  • 모든 이벤트가 버블링되는 것은 아님

  • 전파 차단은 최소한으로 사용

  • 구조를 먼저 설계한 뒤 이벤트를 등록

이 원칙을 지키면
코드가 복잡해지는 것을 방지할 수 있다.

마무리 정리

자바스크립트의 이벤트 전파는 단순한 동작 규칙이 아니라, 웹 페이지 전체의 상호작용 구조를 이해하는 핵심 개념이다. 이벤트가 어디서 시작되고, 어떤 경로를 따라 이동하는지를 이해하면 불필요한 오류를 줄일 수 있으며, 보다 효율적인 이벤트 처리가 가능해진다. 특히 복잡한 UI를 다루는 환경에서는 이벤트 전파에 대한 이해가 코드의 품질과 직결된다. 자바스크립트로 동적인 웹을 구현하고자 한다면, 이벤트 전파 개념을 정확히 짚고 넘어가는 것이 중요하다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

빵집 줄서기와 시간 복잡도의 관계

  빵집 줄서기와 시간 복잡도의 관계 알고리즘을 공부하다 보면 반드시 등장하는 개념이 있습니다. 바로 시간 복잡도(Time Complexity)입니다. 많은 초보자들이 이 용어를 듣고 어려워하지만, 사실 시간 복잡도는 우리 일상 속에서도 자연스럽게 경험할 수 있는 개념입니다. 가장 쉬운 예시가 바로 빵집 줄서기입니다. 빵집 앞에 사람들이 길게 줄을 서 있을 때, 빵을 사는 데 걸리는 시간을 계산하는 원리를 이해하면 시간 복잡도가 왜 중요한지 바로 감이 잡힙니다. 1. 시간 복잡도란 무엇인가 시간 복잡도는 간단히 말해 프로그램이 데이터를 처리하는 데 걸리는 시간의 변화량을 나타내는 개념입니다. 즉, 데이터가 많아질수록 프로그램이 얼마나 느려지는지를 예측하는 기준이라고 볼 수 있습니다. 예를 들어 10개의 데이터를 처리하는 프로그램이 있다면, 그걸 100개, 1000개로 늘렸을 때 실행 시간이 얼마나 늘어나는지를 계산하는 것이 시간 복잡도의 핵심입니다. 시간 복잡도는 보통 O(빅오) 표기법으로 표현합니다. 예를 들어 O(1), O(n), O(n²), O(log n) 같은 형태가 대표적입니다. 이 표기는 “데이터 개수 n이 커질수록 실행 시간이 어떤 비율로 증가하는가”를 수학적으로 나타낸 것입니다. 2. 빵집 줄서기와 시간 복잡도의 공통점 빵집에 손님이 한 명만 있을 때는 금방 계산이 끝납니다. 하지만 줄이 길어질수록 기다리는 시간은 점점 늘어나죠. 이 현상이 바로 시간 복잡도와 같습니다. 예를 들어 빵을 고르고 계산하는 데 각각 1분이 걸린다고 해봅시다. 손님이 한 명이면 2분이면 끝나지만, 손님이 10명이면 20분, 100명이면 200분이 걸립니다. 이런 관계는 O(n) 형태의 시간 복잡도라고 할 수 있습니다. 즉, 손님의 수가 n배로 늘어나면, 걸리는 시간도 n배로 증가합니다. 3. 효율이 떨어지는 줄서기 – O(n²) 구조 만약 빵집 직원이 손님을 효율적으로 처리...
자세한 내용 보기

변수와 상수의 차이, 그리고 실무에서의 활용 방법

  프로그래밍을 배우다 보면 가장 먼저 접하게 되는 개념이 ‘변수’와 ‘상수’다. 처음에는 두 단어가 비슷해 보여서 구분이 어려울 수 있다. 하지만 프로그램의 안정성과 효율성을 좌우하는 중요한 기초 개념이 바로 이 두 가지다. 변수와 상수를 정확히 이해하고 사용하는 습관은 초보 개발자와 숙련된 개발자를 가르는 분기점이 된다. 변수란 무엇인가 변수는 이름 그대로 ‘변할 수 있는 수’를 의미한다. 프로그램이 실행되는 동안 데이터가 계속 바뀔 수 있을 때 사용하는 저장공간이다. 예를 들어 로그인한 사용자의 이름, 장바구니의 총액, 게임 속 점수처럼 상황에 따라 계속 변하는 값들은 변수로 저장된다. 변수는 프로그램의 흐름을 따라 변화하며, 사용자 입력이나 계산 결과를 임시로 담는 역할을 한다. 파이썬을 예로 들어보면 다음과 같다. name = "민수" score = 90 이 코드는 name과 score라는 이름의 변수에 각각 문자열과 숫자 데이터를 담는 예다. 이후 score = score + 10 이라는 연산을 하면, score의 값이 100으로 바뀌게 된다. 바로 이런 변화 가능성이 변수의 핵심이다. 변수를 활용하면 프로그램이 상황에 맞게 유연하게 작동할 수 있다. 데이터를 즉시 수정하거나 새로운 값을 반영할 수 있기 때문이다. 하지만 이러한 유연성이 때로는 문제를 일으키기도 한다. 변수 값이 의도치 않게 바뀌면 전체 프로그램의 동작이 흔들릴 수 있기 때문이다. 그래서 언제 변수를 사용하고 언제 상수를 사용해야 하는지 판단하는 것이 중요하다. 상수란 무엇인가 상수는 ‘항상 같은 수’라는 뜻이다. 프로그램이 실행되는 동안 절대 변하지 않는 값을 저장한다. 예를 들어 원주율, 부가가치세율, 기본 할인율 등은 코드 전반에서 반복적으로 사용되지만, 절대로 바뀌지 않아야 한다. 이런 값은 상수로 선언하는 것이 안전하다. 파이썬에서는 상수를 명시적으로 지원하지 않지만, 관례적으로 대문자로 선언해 개발자가 변경하지 말아야 함을 표현한다...
자세한 내용 보기

파이썬 객체지향 프로그래밍(OOP) 완전정복 | 클래스, 상속, 캡슐화까지 한 번에 이해하기

  파이썬을 처음 배울 때는 변수와 함수만으로 프로그램을 구성하지만, 실무나 프로젝트 규모가 커질수록 코드 관리가 점점 어려워진다. 이때 필요한 개념이 바로 객체지향 프로그래밍이다. 객체지향 프로그래밍(OOP, Object Oriented Programming)은 프로그램을 단순한 명령어의 나열이 아닌 ‘객체’ 중심으로 바라보는 사고방식이다. 객체란 데이터와 기능을 하나로 묶은 단위이며, 현실 세계의 사물이나 개념을 코드로 표현한 것이다. 객체지향의 핵심은 크게 세 가지로 정리된다. 첫째, 캡슐화. 관련된 데이터와 기능을 하나의 객체로 묶어 외부 접근을 제한하는 개념이다. 둘째, 상속. 기존 코드를 재사용하면서 새로운 기능을 확장할 수 있도록 하는 기능이다. 셋째, 다형성. 같은 이름의 메서드가 객체에 따라 다른 동작을 하는 성질을 말한다. 이 세 가지 개념을 이해하면 코드를 효율적이고 유지보수하기 쉬운 구조로 만들 수 있다. 클래스와 객체의 기본 개념 클래스(Class)는 설계도이고, 객체(Object)는 그 설계도로부터 만들어진 실제 제품이라고 할 수 있다. 예를 들어 자동차 설계도가 클래스라면, 실제 우리가 타는 자동차는 객체다. 아래는 간단한 예시이다. Car라는 클래스를 만들고, 브랜드와 색상을 초기화한다. 그런 다음 drive 메서드를 통해 자동차가 출발하는 동작을 표현한다. 예시 코드 설명 class Car: 클래스를 선언한다. def init(self, brand, color): 생성자 함수로 브랜드와 색상을 초기화한다. def drive(self): 자동차가 출발했다는 문장을 출력한다. my_car = Car(“Hyundai”, “black”) 으로 객체를 생성한다. my_car.drive() 를 호출하면 “black색 Hyundai 자동차가 출발합니다!” 라는 문장이 출력된다. 이처럼 클래스는 관련된 데이터와 행동을 하나로 묶어 표현한다. 캡슐화(Encapsulation) ...
자세한 내용 보기