이벤트 - 이벤트 버블링과 캡쳐링

개발할 때 이벤트 핸들러 등록을 쉽게 또 자주 하는데 (클릭, 키보드 입력, 마우스 이동시 등등... 함수 호출)

그동안은 용어에 대한 숙지가 부족한 채로 사용만 한 것 같아 확실히 정리해보자!!

이벤트란 뭘까? 이벤트 = 행동.

브라우저 안에서 어떠한 함수가 호출될 행동을 하는 것을 이벤트라고 한다.

이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고

브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.

 

이벤트 타입이 200여 가지나 있다는데..(써본 게 별로 없는......;;)

이벤트 타입 상세 목록 확인

 

리액트 이벤트 핸들러 등록

import React from "react";

const Test = () => {
  return (
    <button onClick={() => {console.log("안녕!");}}>
      클릭
    </button>
  );
};

export default Test;

그렇다면 브라우저는 어떻게 이벤트 발생을 감지할까?

 

이벤트 흐름엔 3가지가 있다.

1. 캡쳐링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

 

이벤트 버블링 - Event Bubbling

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다.

가장 최상단의 요소(body)를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

이벤트 버블링

아래의 코드를 살펴보자!

import React from "react";

const Test = () => {
  return (
    <React.Fragment>
      <div onClick={() => console.log(1)}>
        1
        <div onClick={() => console.log(2)}>
          2<div onClick={() => console.log(3)}>3</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Test;

 

실행 결과

가장 마지막 <div>를 클릭한 결과,

<div>3</div> 핸들러가 동작하고 다음으로

<div>2</div> 핸들러가 동작, 마지막으로

<div>1</div> 핸들러가 동작하며 이벤트 핸들러 동작이 마쳤다.

 

이러한 흐름을 이벤트 버블링 이라고 한다!

그럼 항상! 매번! 모든 이벤트가 버블링 될까?

버블링 되지 않는 이벤트도 있고(focus) 버블링을 중단 할 수도 있다! (좋은 방법은 아니라고 하니 참고만 하자!)

event.stopPropagation() - 상위 버블링을 막아준다. 다른 핸들러의 동작은 막지 못함.

event.stopImmediatePropagation() - 요소에 할당된 이벤트 핸들러까지 막아준다.

꼭 필요한 경우가 아니라면 버블링을 막지 말아요!

 

이벤트 캡쳐링 - Event Capturing

이벤트 버블링과 반대 방향으로 동작하는 이벤트 전파 방식이다.

이벤트 캡쳐링

흔히 사용되지는 않지만 굳이.. 사용한다면 addEventListener의 capture 옵션을 true로 설정해주면 된다.

element.addEventListener(..., {capture: true})
// 아니면 {capture: true} 대신, true를 써줘도 된다.
element.addEventListener(..., true)