이벤트버블링,캡쳐링

이벤트 버블링이란 ?

하위 자식요소에서 이벤트가 전파되어 부모 요소의 이벤트까지 전파되어지는 특성을 말한다.

이벤트 캡처링이란 ?

이벤트 버블링과 반대로 부모 요소에서 자식 요소의 이벤트까지 전파되어지는 특성을 말한다.

이벤트 버블링이 발생하는 이유는 당연하다.
만약 body -> div1 -> div2 태그로 이어지는 돔트리 구조를 가지고있다고 한다면 div2태그는 body태그 안에 존재하기 때문에 div2 태그를 클릭했을 때 body 태그와 div1 태그가 클릭된 것으로 인식되어지기 때문이다.
그래서 이벤트는 div2 -> div1 -> body 순으로 발생되어진다.

이벤트 버블링과 캡처링의 차이점

여기 부모 -> 자식1 -> 자식2로 이루어진 코드가 있다.

여기서 자식2를 클릭하게 된다면

자식2의 이벤트를 시작으로 차례차례대로 이벤트가 발생하게 되어진다.

export default function EventExercise() {
  const handleParentClick = (event) => {
    console.log("부모 이벤트");
  };

  const handleChild1Click = (event) => {
    console.log("자식1 이벤트");
  };

  const handleChild2Click = (event) => {
    console.log("자식2 이벤트");
  };


  return (
    <>
      <div onClick={handleParentClick}>
        부모
        <div onClick={handleChild1Click}>
          자식1
          <div onClick={handleChild2Click}>자식2</div>
        </div>
      </div>
    </>
  );

이와 다르게 캡처링은 똑같이 자식2를 클릭하게 되면

부모에서 이벤트가 전파되어지기 시작한다.

export default function EventExercise() {
  const handleParentClick = (event) => {
    console.log("부모 이벤트");
  };

  const handleChild1Click = (event) => {
    console.log("자식1 이벤트");
  };

  const handleChild2Click = (event) => {
    console.log("자식2 이벤트");
  };


  return (
    <>
      <div onClickCapture={handleParentClick}>
        부모
        <div onClickCapture={handleChild1Click}>
          자식1
          <div onClickCapture={handleChild2Click}>자식2</div>
        </div>
      </div>
    </>
  );

리액트에서 캡처링을 사용하는 방법은 onClick이 아닌 onClickCapture를 사용하면 된다.

이벤트 전파를 막는 방법

방법은 간단하다. 이벤트를 클릭했을때 전파를 막으면 된다.

e.stopPropagtion()

이것을 전파시키고 싶지 않은 이벤트에 붙혀주면 된다.

만약 자식2에서 이벤트 전파를 막고 싶다면

  const handleChild2Click = (event) => {
    console.log("자식2 이벤트");
    event.stopPropagation();
  };

자식2를 클릭했을 때 콘솔의 출력 결과는

자식2에서 이벤트가 멈추게된다.

캡처링인 경우도 마찬가지로 똑같이 처리해주면 된다.

번외) e.preventDefault()

이것을 호출하면 이벤트의 기본 동작을 취소할 수 있다. 이는 주로 링크를 클릭했을 때나 폼을 제출했을 때의 기본 동작(페이지 이동이나 폼 전송)을 방지하는 데 사용된다.

예시)

export default function EventExercise() {

  const handleLinkClick = (event) => {
    // 기본 동작인 페이지 전환을 막음
    event.preventDefault();
    // 추가적인 로직을 수행할 수 있음
    alert("링크 클릭, 페이지 전환을 막음");
  };

  return (
    <>
        <a href="http://www.naver.com" onClick={handleLinkClick}>
          이동
		</a>
    </>
  );
}

여기 클릭하면 특정 페이지로 이동하는 a태그가 있다.
여기서 만약 event.preventDefault()를 사용하게 된다면 페이지는 이동하지 않고 alert창만 나타나게 된다.