[react] eventbubbling, stoppropagation

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

 

EventBubbling.tsx

import type { SyntheticEvent } from "react"

export default function EventBubbling(){

    const onDivClick = (e: SyntheticEvent) => {
        const {isTrusted, target, bubbles, currentTarget} = e
        console.log('click event bubbles on <div>', isTrusted, target, bubbles, currentTarget)
    }

    const onButtonClick = (e:SyntheticEvent) => {
        const {isTrusted, target, bubbles} = e
        console.log('click event starts at <button>', isTrusted, target, bubbles)
    }

    return (
    <div onClick={onDivClick}>
        <p>EventBubbling</p>
        <button onClick={onButtonClick}>Click Me</button>
    </div>
    )
}

 

 

StopPropagation.tsx

import type { SyntheticEvent } from "react"

export default function StopPropagation(){
    const onDivClick = (e: SyntheticEvent) => console.log("click event bubbles on <div>")
    const onButtonClick = (e: SyntheticEvent) => {
        console.log('mouse click on <button> and call stopPropagation')
        e.stopPropagation() //이벤트 버블링을 멈춤 = 이벤트 캡처링
    }
    return (
    <div onClick={onDivClick}>
        <p>StopPropagation</p>
        <button onClick={onButtonClick}>Click Me and Stop event propabation!</button>
    </div>
    )
}