[Javascript] 이벤트 전파 & 이벤트 위임

728x90

이벤트 핸들러 등록 방법

이벤트가 발생하면 브라우저에 의해 이벤트 핸들러에 등록된 함수가 호출됩니다.
이벤트 핸들러를 등록하는 방법은 크게 3가지가 있습니다.

1. 이벤트 핸들러 어트리뷰트 방식

HTML 요소의 이벤트 핸들러 어트리뷰트 값으로 함수 호출문을 할당하는 방식입니다.

<button onclick="sayHi('Lee')">Click me!</button>

<script>
  function sayHi(name) {
    console.log(`Hi! ${name}.`);
  }
</script>

이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미합니다.

function onclick(event) {
  sayHi('Lee')
}
// 이런 함수가 암묵적으로 생성되어 요소의 onclick 프로퍼티에 바인딩됩니다.

이벤트 핸들러 어트리뷰트 방식은 HTML과 JS가 혼재하므로 권장되지 않습니다.
대부분의 프레임워크/라이브러리(React, Vue, Angular, Svelte 등)는 컴포넌트 기반 개발(CBD)에서 이를 피하고, 구조적으로 HTML과 JS를 분리하여 사용합니다.

2. 이벤트 핸들러 프로퍼티 방식

DOM 요소의 이벤트 핸들러 프로퍼티에 직접 함수를 바인딩하는 방식입니다.

const $button = document.querySelector('button');
$button.onclick = function() {
  console.log('button click');
};

이 방식은 HTML과 JS를 분리할 수 있다는 장점이 있습니다.
하지만 단점은 하나의 이벤트 핸들러만 바인딩할 수 있다는 점입니다.

3. addEventListener 메서드 방식

addEventListener 메서드를 사용하면 하나 이상의 이벤트 핸들러를 등록할 수 있습니다.

EventTarget.addEventListener('eventType', handler, [, useCapture]);

$button.addEventListener('click', function() {
  console.log('button click');
});

특징은 다음과 같습니다.

하나 이상의 이벤트 핸들러를 등록할 수 있습니다.
등록된 순서대로 호출됩니다.
동일한 참조의 이벤트 핸들러를 중복 등록하면 하나만 등록됩니다.
useCapture 옵션을 통해 캡처링 단계에서도 이벤트를 잡아낼 수 있습니다.

이벤트 전파

특정 DOM 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다.
이벤트 전파는 이벤트 객체가 전달되는 방향에 따라 3단계로 나눌 수 있습니다.

캡처링 단계 : 이벤트가 상위 요소에서 하위 요소로 전파됩니다.
타깃 단계 : 이벤트가 실제 타깃 요소에 도달합니다.
버블링 단계 : 이벤트가 하위 요소에서 상위 요소로 전파됩니다.

이벤트 버블링 덕분에 이벤트를 발생시킨 타깃뿐 아니라 상위 DOM 요소에서도 이벤트를 감지할 수 있습니다.
이를 활용한 것이 바로 이벤트 위임입니다.

단, focus/blur, mouseenter/mouseleave와 같은 몇몇 이벤트는 버블링되지 않습니다.

이벤트 캡처링과 버블링 예시

<body>
  <p><button>버튼</button></p>

  <script>
    document.body.addEventListener('click', () => {
      console.log("handler for body");
    }); // 버블링 단계

    const p = document.querySelector('p');
    p.addEventListener('click', () => {
      console.log("handler for p");
    }, true); // 캡처링 단계

    const button = document.querySelector('button');
    button.addEventListener('click', () => {
      console.log("handler for button");
    }); // 타깃 단계
  </script>
</body>

실행 결과 순서

"handler for p" (캡처링 단계)
"handler for button" (타깃 단계)
"handler for body" (버블링 단계)

이벤트 전파 방지

이벤트가 상위 요소로 전파되는 것을 막고 싶을 때는 stopPropagation()을 사용합니다.

e.stopPropagation();

이벤트 위임

이벤트 위임이란, 여러 하위 DOM 요소에 각각 이벤트 핸들러를 등록하지 않고, 상위 요소에 하나의 이벤트 핸들러를 등록하여 효율적으로 이벤트를 처리하는 방식입니다.

이벤트는 버블링을 통해 상위 요소로 전파되므로, 상위 요소에서 이벤트를 감지할 수 있습니다.
하지만 이때 주의할 점은, 이벤트 타깃이 항상 기대한 DOM 요소일 필요는 없다는 것입니다. 따라서 event.target을 검사하거나 closest()를 활용해야 합니다.

예시:

document.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (!li) return;
  console.log('클릭된 요소:', li.textContent);
});

이벤트 핸들러 내부의 this

이벤트 핸들러 어트리뷰트 방식
- 함수 내부의 this는 전역 객체(window)를 가리킵니다.
- 대신 this를 인수로 전달하면 해당 DOM 요소를 직접 참조할 수 있습니다.

<button onclick="handleClick(this)">버튼</button>
<script>
  function handleClick(that){
    console.log(this); // window
    console.log(that); // <button>
  }
</script>

이벤트 핸들러 프로퍼티 방식과 addEventListener 방식
- 함수 내부의 this는 이벤트가 바인딩된 요소를 가리킵니다.
- 이는 event.currentTarget과 동일합니다.

$button.onclick = function(e) {
  console.log(this);            // $button
  console.log(e.currentTarget); // $button
};

이벤트 핸들러에 인수 전달

이벤트 핸들러에 직접 인수를 전달하고 싶을 때는, 보통 래퍼 함수를 사용합니다.

const checkUserNameLength = min => {...};

$input.onblur = () => { checkUserNameLength(5); };

혹은 함수를 반환하는 함수를 활용하여 바인딩할 수 있습니다.

마무리

이벤트 시스템은 브라우저가 DOM 트리 구조를 효율적으로 관리하고, 성능을 최적화하기 위해 설계된 중요한 메커니즘입니다.

이벤트 전파(캡처링/버블링) 를 통해 상위 요소와 하위 요소 모두 이벤트를 감지할 수 있습니다.
이를 응용한 이벤트 위임은 성능과 유지보수성을 높여줍니다.
이벤트 핸들러 등록 방식에는 어트리뷰트, 프로퍼티, addEventListener 방식이 있으며, 실무에서는 addEventListener를 권장합니다.

'💙 프론트엔드(FE)' 카테고리의 다른 글

Webpack + Babel + TypeScript 설정 가이드 (0)	2025.09.16
MVC 구조 - 옵저버 패턴 ( Observer Pattern ) (0)	2025.09.08
[CoderPad] 리액트 가상 스크롤 (Virtualized List) (5)	2025.06.22
Next.js 12 에서 React Query v4 + SSR 활용하기 (0)	2025.05.01
웹 프론트엔드 클린 아키텍쳐(Clean Architecture) 의 역사 (0)	2025.04.29

이벤트 핸들러 등록 방법

1. 이벤트 핸들러 어트리뷰트 방식

2. 이벤트 핸들러 프로퍼티 방식

3. addEventListener 메서드 방식

이벤트 전파

이벤트 캡처링과 버블링 예시

이벤트 전파 방지

이벤트 위임

이벤트 핸들러 내부의 this

이벤트 핸들러에 인수 전달

마무리

'💙 프론트엔드(FE)' 카테고리의 다른 글

티스토리툴바