이벤트 핸들링

• v-on에 메소드 이름을 직접 바인딩 하거나 인라인 메소드 핸들러를 사용할 수 있음
• @이벤트이름=”메소드이름” or @이벤트이름=”메소드이름()”
• 메소드 이름을 직접 바인딩한다면 해당 메소드의 매개변수에 event 객체가 자동으로 넘어온다
• 인라인 메소드 핸들러는 매개변수가 적어준 것만 넘어온다
• 호출할 때 $event로 매개변수를 넣어주면 이벤트 객체를 넘겨줄 수 있다
• 호출할 메소드가 두가지 이상일 때, 세미콜론이나 쉼표(vue3부터)로 구분해서 여러개 호출할 수 있다
 

이벤트 수식어

• .stop ⇒ ==event.stopPropagation(), 버블링 방지

• .capture ⇒ == 옵션 {capture: true}, 캡쳐링 허용 (자식 이벤트가 실행되기 전에 부모 요소의 이벤트가 내려오면서 실행됨)

• .prevent ⇒ == event.preventDefault()

• .once ⇒ 이벤트를 최초 한번만 실행, 걸어둔 접미사들도 최초 한번만 유효하다

• .self ⇒ event.currentTarget와 event.target가 같을 때만 이벤트 실행. 즉, 자식요소에는 이벤트를 걸지 않는다

• .passive ⇒ == 옵션 {passive: true}, 이벤트 실행과 리스너 호출을 별개로 둠

@click.prevent.stop

키 수식어

• 키보드 이벤트(keyup, keydown 등)일 때 키 수식어를 통해 ‘event.key’를 지정할 수 있다

• 역시 체이닝 방식으로 여러 수식어를 연결해서, 해당 키를 동시에 눌러야 실행될 수 있게 한다

@keydown.enter
@keydown.esc
@keydown.ctrl
@keyup.arrow-down

.exact 수식어

<!-- Ctrl과 함께 Alt 또는 Shift를 누른 상태에서도 클릭하면 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- 오직 Ctrl만 누른 상태에서 클릭해야 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 입력키를 누르지 않고 클릭해야지만 실행됩니다. -->
<button @click.exact="onClick">A</button>

마우스 버튼 수식어

• .left : 왼쪽 마우스

• .right : 오른쪽 마우스

• .middle : 휠