Vue.js 문법 - 이벤트 수식어

 

이벤트 수식어

 

- 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일

- 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다.

- 이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공, 수식어는 점으로 된 접미사

 

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

 

<!-- 클릭 이벤트 전파가 중단되었습니다. -->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대한 한번에 트리거 됩니다.-->
<a @click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<!-- 바로, `onScroll`완료되는 것을 기다리는 것을 대신합니다.  -->
<!-- 이 경우에`event.preventDefault()`를 포함하고 있습니다. -->
<!-- 특히 .passive 수식어는 모바일 환경에서 성능향상에 도움이 됩니다 -->
<!-- 화면의 스크롤과 로직 처리를 독립시켜준다 -->
<div @scroll.passive="onScroll">...</div>

 

이벤트 버블링

 

<template>
  <div
    class="parent"
    @click="handlerA">
    <div
      class="child"
      @click="handlerB">
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    }
  }
}
</script>

<style scoped lang="scss">
 .parent {
   width: 200px;
   height: 100px;
   background-color: royalblue;
   margin: 10px;
   padding: 10px;
   .child {
     width: 100px;
     height: 100px;
     background-color: orange;
   }
 }
</style>

 

결과

 

코드 이해하기

- 파란 박스 (parent)를 클릭하면 handlerA() 동작

- 오렌지 박스 (child)를 클릭하면 handlerB() 동작, 이후 부모 요소 handlerA() 동작

- 상위 요소로 점점 확산되는 이러한 개념을 이벤트 버블링 이라고 부름

- 이벤트 버블링 방지 방법으로는 이벤트 수식어 .stop 을 사용할 수 있음

 

이벤트 캡처링 (Event Capturing)

 

- 이벤트 버블링의 반대되는 개념

- 하위 요소로 점점 확산되는 개념을 이벤트 캡처링 이라고 부름

 

- 위의 예제에서 오렌지 박스를 클릭하면 자식 요소 메소드인 handlerB()가 먼저 동작

- 이후 부모 요소 메소드인 handlerA()가 동작하는 순서

- 부모 요소에 이벤트 수식어 .capture 를 사용하면 handlerA() 먼저 동작, 이후 handlerB() 동작

- 오렌지 박스를 클릭했을때 handlerA()만 동작하게 하려면 .capture.stop 메소드 체이닝을 이용