리액트에서 이벤트 버블링과 캡쳐를 알아보자.

Luffy.A·2022년 5월 1일

리액트 버블링 자바스크립트 캡처링

리액트 개념을 공부해보자

목록 보기

1/2

버블링? 캡쳐? 당췌 무슨 소리인지 모르겠다. 이 참에 알아보자.

버블링

버블링은 한 요소에 이벤트가 발생 했을 때,

이벤트에 걸어둔 핸들러(함수, 명령)가 동작하고,

이어서 부모요소의 핸들러가 동작한다.

쉽게말하면 버튼을 클릭하는 순간, 족보대로 올라가면서 조상들이 갖고 있는 핸들러도 모두 실행된다.

(5대 호카게를 눌러 나선환을 발사시키면, 4대 호카게 고유기술, 3대 호카게 고유기술, 2대 호카게 고유기술, 1대 호카게 고유기술이 차례로 발사한다!!)

거품처럼 계속 올라간다 해서 버블링인가?

<div class="1대">
	<div class="2대">
		<div class="3대">
			<div class="4대">
				<div class="5대">
					나선환!!!!!!!!!!🌀
				</div>
			</div>
		</div>
	</div>
</div>

캡처링

캡처링은 버블링과 반대개념이라고 생각하면 된다.

버블링이 가장 하단 요소에서 조상요소로 올라간다면

캡처링은 그 반대로 조상에서 하단으로 내려가는 셈이다. (족보 순이다)

5대 호카게를 누르면 1대 2대 3대 4대 5대 순으로 캡처링을 한다.

쉽게 생각하면,

버블링은 줌아웃 느낌이고

캡처링은 줌인 느낌이다.

(그런데 줌인 줌아웃 하면서 다 건드린다ㅎㅎㅎ)

그러면, 리액트에서 버블링과 캡처링의 실행순서는 어떻게 될까??

버블링과 캡처링의 실행 순서

const Event = () => {
    

    const handleClickCapture = () => {
        console.log("할아버지 캡쳐")
    }

    const handleClickCapture2 = () => {
        console.log("아빠 캡쳐")
    }

    const handleClickBubble = () => {
        console.log("할아버지 버블")
    }

    const handleClickBubble2 = () => {
        console.log("아빠 버블")
    }

    const handleBtnClick = () => {
        console.log("아들클릭!")
    }

        <div className="할아버지" onClickCapture={handleClickCapture} onClick={handleClickBubble}>
            <div className="아빠" onClickCapture={handleClickCapture2} onClick={handleClickBubble2}>
                <button className="아들" onClick={handleBtnClick}>Button</button>
            </div>
        </div>
    );
};