[Event Bubbling] stopPropagation, ImmediateStopPropagation

이벤트 버블링

이벤트 버블링이란 특정 Element 에서 발생한 이벤트가 부모로, 부모의 부모로, 부모의 부모의 부모로 계속 전달되는 것이다. 최종적으로 document 에 전달될때까지 진행된다.

A 라는 Element 에 onClick evnet-listener 가 없더라도 클릭이 발생하면, A 의 부모에게 click Event 가 전달된다.

아래는 이벤트 버블링을 테스트 한 것이다.

click 을 한번 하면, onClick 메서드 내부에서 e.target.style.backgroundColor = color; 가 실행되어 클릭한 Element 부터 부모까지 전부 색깔이 바뀔 것이라 생각했는데..
알고보니 e.target 은 클릭한 Element 만 의미하더라..

import "./styles.css";
import styled from "styled-components";

export default function App() {
  const onClick = (e) => {
    // 이건 bubbling 으로 인해 실행되는데
    console.log(Math.random());

    // 이건 왜 bubbling 으로 실행되지 않아?
    const color = "#" + Math.floor(Math.random() * 16777215).toString(16);
    e.target.style.backgroundColor = color;
  };

  return (
    <>
      <One onClick={onClick}>
        <Two onClick={onClick}>
          <Three onClick={onClick}>
            <Four />
          </Three>
        </Two>
      </One>
    </>
  );
}

const One = styled.div`
  position: absolute;
  width: 500px;
  height: 500px;
  left: 100px;
  top: 10px;
  border: 1px solid black;
`;

const Two = styled.div`
  position: absolute;
  width: 300px;
  height: 300px;
  left: 100px;
  top: 100px;
  border: 1px solid black;
`;

const Three = styled.div`
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50px;
  top: 50px;
  border: 1px solid black;
`;

const Four = styled.div`
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  border: 1px solid black;
`;

StopPropagation

Propagation 은 번식이라는 뜻이다.
이벤트가 발생해서 상위로 전달될 때 이를 이벤트가 번식한다고 볼 수 있다.
즉, StopPropagation 은 이벤트가 전달되는 것을 막는 함수이다.

stopImmediatePropagation

즉시 번식을 막는다.
이게 무슨뜻이냐면, 예를들어 한 엘리먼트에 onClick 이벤트가 2개 등록되어 있다.
이때 첫번째 콜백에 stopImmediatePropagation() 을 걸면, 두번째 onClick 콜백은 실행되지 않는다. 당연히, 버블링과 캡처링도 안된다.
stopPropagation 과 다른점은, stopImmediatePropagation 는 현재 엘리먼트에 붙어있는 또 다른 이벤트가 실행되는것도 막는다는 점이다.