[vue] 이벤트 버블링 관련 수식어

공식문서에 이벤트 핸들링 중 버블링과 관련된 수식어 들이 보여 정리함.

https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

Event Handling | Vue.js

 

---

 

<template>
  <div @contextmenu="abc(1)">
    <div @contextmenu="abc(2)">click.stop <!-- stop은 이벤트전파을 막고 prevent은 원래의 이벤트를 없앤다. -->
      <div @contextmenu="abc(3)"></div>  
    </div> 
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    abc(value) {
      alert(value)
    }
  },
}
</script>

 

 

위 코드를 실행할 시엔 문제가 한 가지 있다.

바로 click.stop을 우클릭하였을시 부모,자신,자식 총 세번의 abc함수가 호출이 됨

의도와 맞다면 문제가 없겠지만 의도와 다를시 이를 다룰 수 있어야됨

 

---

 

수식어를 정리하기전 이벤트 전파 현상에 대해 알아야하는데

이벤트 전파 현상이란 위의 예시처럼

클릭한 DOM(이벤트가 발생한 DOM)과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생하는 것을 

이벤트 전파 현상이라 함

여기서 버블링과 캡처링이란 것이 나오는데

버블링은 자신을 포함해 부모의 이벤트 까지 발생시키는 것

캡처링은 반대로 자신을 포함해 자식의 이벤트 까지 발생시키는 것

 

---

 

5가지 수식어를 정리함

 

 - stop        

 -> 이벤트 전파를 막음 (버블링,캡처링)

 

 - prevent    

 -> 원래 이벤트가 지니고 있던 실행동작을 막음

(우클릭시 아래 이미지가 안 뜸) 

 

 - self        

 -> 자신으로부터 시작하는 이벤트만 수행함

 

 - capture

 -> 이벤트 동작하는 것들 중 우선선위가 높게 책정됨 (이벤트중 먼저 실행 됨)

 

 - once

 -> 이벤트가 수행될시 여러 이벤트 중첩상황이더라도 한번의 이벤트만 수행함

<template>

  <div @contextmenu="abc(1)">
    <div @contextmenu.stop.prevent="abc(2)">click.stop
      <div @contextmenu="abc(3)"></div>  
    </div> 
  </div>
  <!-- stop은 이벤트전파을 막고 prevent은 원래의 이벤트를 없앤다. -->
  <!-- alert(2) -->
  
  <div @contextmenu="abc(1)">
    <div @contextmenu.self="abc(2)">
      <div @contextmenu="abc(3)">dsa</div>  
    </div> 
  </div>
  <!-- self은 자신으로 부터 시작하는 이벤트만 수행됨 -->
  <!-- alert(3), alert(1) -->
  
  <div @contextmenu.capture="abc(1)">
    <div @contextmenu="abc(2)">
      <div @contextmenu="abc(3)">click.capture</div>  
    </div> 
  </div>
  <!-- capture가 붙은게 우선수위가 높음 -->
  <!-- alert(1), alert(3), alert(2) -->
  
  <div @contextmenu.capture="abc(1)">
    <div @contextmenu.once="abc(2)">click.once
      <div @contextmenu="abc(3)"></div>  
    </div> 
  </div>
  <!-- 관련 이벤트가 수행될때마다 한번만 실행됨 -->
  <!-- alert(1) -->
  
</template>

<script>

export default {
  name: 'App',
  methods: {
    abc(value) {
      alert(value)
    }
  },
}
</script>

 

보너스로 이런것도 있음

<div @click.alt="abc('동시에눌러버리기')">동시에 눌러라</div>

alt와 클릭버튼을 동시에 눌러야 실행됨