단순 코드 기록/React

React_eventPreventDefault()와 StopPropagation()

일일일코_장민기 2024. 3. 14. 11:47
728x90

export default function App(){

  function handleEvent(e){
    console.log("handleEvent Click");
    e.preventDefault();
  }

  function parent(e){
    console.log("parent: " + e);
  }

  function child(e){
    console.log("child: " + e);
    e.stopPropagation();          //부모의 버블링 방지
  }


  return(
    <>
    <form onSubmit={handleEvent} action="target.html">
      <button>submit</button>
    </form>

    <hr></hr>

    <div onClick={parent} style={{backgroundColor: "yellow"}}>
      parent
      <div onClick={child} style={{backgroundColor: "red"}}>child</div>

    </div>

    </>
  )
}