[Vue] 이벤트 수식어 (prevent, once, stop, capture, self, passive)

⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

이벤트 수식어

Vue는 복잡한 javascript 구현을 간단히 처리하기 위해 이벤트 수식어를 제공한다.

@이벤트.이벤트수식어="수행할 이벤트"
v-on:이벤트.이벤트수식어="수행할 이벤트"

 

이벤트 수식어의 종류 

• prevent: event.preventDefault()처럼 이벤트의 기본동작을 방지해준다
• once: 이벤트를 한번만 실행해준다
• stop: event.stopPropagation()처럼 상위 요소에 이벤트가 전파되는 것을 방지해준다 (이벤트 버블링 중단)
• capture: 이벤트를 특정 상위요소에서 하위요소로 전파시켜준다 (포착 단계에서만 이벤트를 발생시킨다)
• self: 요소가 화면에 노출된 부분에서만 이벤트가 발생한다 (자식 요소로 가려져 있는 부분에서는 이벤트가 발생하지 않는다)
• passive: 기본 이벤트를 취소할 수 없게 함

 

prevent

event.preventDefault()처럼 이벤트의 기본동작을 방지해준다. 클릭 이벤트가 발생했을때 콘솔창에 문자는 출력되지만 웹브라우저의 기본동작인 사이트이동은 일어나지 않는다.

<template>
  <a href="https://naver.com" target="_blank" @click.prevent="handler">NAVER</a>
</template>

<script>
export default {
  methods: {
    handler() {
      console.log('NAVER');
    }
  },
};
</script>

 

once

이벤트를 한번만 실행해준다. 클릭 이벤트가 발생했을때 콘솔창에 문자 출력과 새탭에서 사이트 이동이 단 한번 실행되고 두번째 클릭했을때는 발생하지 않는다.

<template>
  <a href="https://naver.com" target="_blank" @click.once="handler">NAVER</a>
</template>

<script>
export default {
  methods: {
    handler() {
      console.log('NAVER');
    }
  },
};
</script>

 

stop

event.stopPropagation()처럼 상위 요소에 이벤트가 전파되는 것을 방지해준다. 즉 이벤트가 상위 요소로 전파(자식 → 부모)되는 이벤트 버블링 중단시킨다. 자식 요소인 주황색 상자를 클릭하면 이벤트가 상위 요소로 전파되서 부모 요소인 파란색 상자의 이벤트도 실행된다. 이렇게 이벤트가 상위 요소로 전파되는 것을 막고 싶다면 stop이라는 이벤트 수식어를 사용하면 된다. 아래의 예제에서는 자식 요소를 클릭했을대 child라는 메서드만 실행이된다. (부모 요소의 이벤트는 발생하지 않는다)

아래의 코드를 출력했을때 화면에 출력

<template>
  <div class="parent" @click="parent">
    <div class="child" @click.stop="child"></div>
  </div>
</template>

<script>
export default {
  methods: {
    parent() {
      console.log('Parent');
    },
    child() {
      console.log('Child');
    },
  },
};
</script>

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

 

capture

이벤트를 특정 상위요소에서 하위요소로 전파시켜준다. 아래의 예제에서는 부모 요소인 파란색 상자에 capture라는 이벤트 수식어가 있다. 일반적으로 이벤트는 하위에서 상위로 전파되는 버블링현상이 일어나지만 capture라는 이벤트 수식어가 있으면 버블링과 반대로 상위요소에서 하위요소로 이벤트가 전파된다. 그러므로 주황색 상자를 클릭했을때 child 메서드 parent 메서드 순서로 이벤트가 발생하는 것이 아닌 그 반대로 parent 메서드부터 child 메서드가 실행된다.

아래의 코드를 출력했을때 화면에 출력

<template>
  <div class="parent" @click.capture="parent">
    <div class="child" @click="child"></div>
  </div>
</template>

<script>
export default {
  methods: {
    parent() {
      console.log('Parent');
    },
    child() {
      console.log('Child');
    },
  },
};
</script>

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

 

self

요소가 화면에 노출된 부분에서만 이벤트가 발생한다. 주황색 상자를 클릭했을때는 child 메서드가 실행되고 파란색 상자를 클릭했을때는 parent 메서드가 실행된다. 주황색과 파란색 상자가 겹치는 부분(자식 요소로 가려져 있는 부분)에서는 부모 요소의 이벤트가 발생하지 않는다. 즉 event.target(이벤트가 발생한 요소)과 event.currentTarget(이벤트가 연결된 요소)가 같을때 메서드가 실행된다

아래의 코드를 출력했을때 화면에 출력

<template>
  <div class="parent" @click.self="parent">
    <div class="child" @click="child"></div>
  </div>
</template>

<script>
export default {
  methods: {
    parent() {
      console.log('Parent');
    },
    child() {
      console.log('Child');
    },
  },
};
</script>

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

 

여러개의 이벤트 수식어 사용하기

여러개의 수식어를 .으로 이어 붙여준다.

<a href="https://naver.com" target="_blank" @click.prevent.once="handler">NAVER</a>