리액트 버블링,캡처링

import React from 'react'

export default function Event() {
    const handleButtonClick =()=>{
        console.log('handleButtonClick');
    }
    const handleClickCapture =()=>{
        console.log('handleClickCapture');
    }
    const handleClickCapture2 =()=>{
        console.log('handleClickCapture2');
    }
    const handleClickBubble = () =>{
        console.log('handleClickBubble');
    }
    return (
        <div onClickCapture={handleClickCapture}>
            <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
            <button onClick={handleButtonClick}>Button</button>
            </div>
        </div>
    )
}

캡처링 : 부모태그에서 자식태그로 이벤트가 발생한다 마지막으로 부모에게 올라간 버블링 : handleClickBubble 이 생긴다