버블링과 캡처링 with Vue // bubbling and capturing

#관련 이미지

https://ko.javascript.info/bubbling-and-capturing

 

#관련 수식어

stop : 이벤트의 전파를 막는다(버블링을 막는다)

capture : 캡처링 단계에서 이벤트를 발생시킨다.

 

#stop 예제 및 결과

<template>
    <div class="a" @click="a">
        a
        <div class="b" @click.stop="b">
            b
            <div class="c" @click="c">
                c
            </div>
        </div>
    </div>
</template>

결과 : c > b

 

#capture 예제 및 결과

<template>
    <div class="a" @click="a">
        a
        <div class="b" @click.capture="b">
            b
            <div class="c" @click="c">
                c
            </div>
        </div>
    </div>
</template>

결과 : b > c > a