Vue 이벤트 핸들링

 

- 이벤트 청취

• v-on 디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용

 

- 인라인 메소드 핸들러

• 인수가 있을 경우 ()안에 추가
• 이벤트 객체도 필요할 경우 $event 사용

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn(message, event) {
    // 네이티브 이벤트에 접근 할 수 있습니다.
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

---

- 복합 이벤트 핸들러

• ,로 메소드를 나열
• 인수가 없더라도 ()를 생략하면 정상적으로 동작하지 않음

<!-- one()과 two() 둘다 버튼 클릭 이벤트를 실행할 수 있습니다.-->
<button @click="one($event), two($event)">
  Submit
</button>

methods: {
  one(event) {
    // 첫번째 핸들러 로직...
  },
  two(event) {
    // 두번째 핸들러 로직...
  }
}

---

- 이벤트 수식어

• 이벤트 수식어 종류
  • .stop, .prevent, .capture, .self, .once, .passive
  • 관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정
    • @click.prevent.self : 모든 클릭 방지
    • @click.self.prevent: 엘리먼트 자체에 대한 클릭만 방지
      
      
• 네이티브 DOM이벤트에 독점적인 다른 수식어들과 달리, .once 수식어는 component events에서도 사용 가능
• .passive 수식어는 모바일 환경에서 성능향상에 도움
  • .passive 수식어와 .prevent 수식어를 함께 사용 금지
  • @wheel 이벤트는 마우스의 휠이 동작할 때 발생. 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()`를 포함하고 있습니다. -->
<div @scroll.passive="onScroll">...</div>

---

- 키 수식어

• 키보드 이벤트를 청취할 때 사용
• 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용
• 키 명령어
  • .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right 등

---

- 시스템 수식어 키목록

• 해당 수식어가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있음
• .ctrl, .alt, .shift, .meta
• .meta는 메칸토시 키보드에서는 command key. 윈도우 키보드에서는 윈도우 키.

---

[ 참고자료 ]

https://v3.ko.vuejs.org/guide/events.html#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%8E%E1%85%A5%E1%86%BC%E1%84%8E%E1%85%B1

이벤트 핸들링 | Vue.js