/react-syntheticEvent

Primary LanguageHTML

dom-event-phase

event phase에 대해 알 수 있습니다.

React syntheticEvent bubbling

export default function App() {
  useEffect(() => {
    document.addEventListener("click", (e) => {
      // @1
      // e.stopPropagation();
      console.log("[document] native dom event triggered");
    });
    const parentDiv = document.getElementById("parent");
    parentDiv.addEventListener("click", (e) => {
      // @2
      // e.stopPropagation();
      console.log("[parent div] native dom event triggered");
    });
  }, []);
  const onParentClick = (e) => {
    // @4
    // e.stopPropagation();
    console.log("[parent div] synthetic event triggered");
  };
  const onChildClick = (e) => {
    // @5
    // e.stopPropagation();
    console.log("[child button] synthetic event triggered");
  };

  return (
    <div id="parent" onClick={onParentClick}>
      <button onClick={onChildClick}>child</button>
    </div>
  );
}

const btn = document.getElementById("btn");
btn.addEventListener("click", (e) => {
  // @3
  // e.stopPropagation();
  console.log("[btn] native dom event triggered");
});

btn도 추가하면 아래와 같이 된다.

@ 순서에 따라 e.stopPropagation();를 활성화시켜보자.

  • @1 native dom document
[btn] native dom event triggered
[parent div] native dom event triggered
[child button] synthetic event triggered
[parent div] synthetic event triggered
[document] native dom event triggered
  • @2 native dom parentDiv
[btn] native dom event triggered
[parent div] native dom event triggered
  • @3 native dom btn
[btn] native dom event triggered
  • @4 onParentClick
[btn] native dom event triggered
[parent div] native dom event triggered
[child button] synthetic event triggered
[parent div] synthetic event triggered
  • @5 onChildClick
[btn] native dom event triggered
[parent div] native dom event triggered
[child button] synthetic event triggered

TL;DR