Event 버블링 해결하기 : Vue 의 Event Modifiers

< 참고 자료 >

 

Event Modifiers

---

개발을 하다보면, 부모 요소와 자식 요소, 심지어 손자 요소까지 각각 이벤트 리스너가 필요한 경우가 있다.

<template>

  <parent @mousedown="parent">

    <child @mousedown="child">

      <grand-child @mousedown="grandChild" />

    </child>

  </parent>

</template>

위의 경우

내가 grand-child 를 클릭하면, grandChild 함수만 호출되느것이 아니라,

부모인 child 역시, child 의 부모인 parent 역시 클릭된것으로 인식하여,

granChild()
child()
parent()

순으로 이벤트 함수가 연속적으로 호출되게된다.

이렇게 하나의 이벤트가 발생했을때 부모 요소로 퍼져나가는 현상을 "버블링" 이라고 한다.

 

버블링 현상을 피하기위해서 Vue 에서는 Event Modifier 를 제공한다.

아래와 같이 6가지가 존재하며,

.stop
.prevent
.capture
.self
.once
.passive

아래와 같이 사용한다.

<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form @submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div @click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>

<template>

  <parent @mousedown.stop="parent">

    <child @mousedown.stop="child">

      <grand-child @mousedown.stop="grandChild" />

    </child>

  </parent>

</template>

위와 같이 .stop 을 붙여주면, 이벤트가 전파되지않고 딱 내가 클릭한 요소의 함수만이 호출된다.