Vue에서의 이벤트 처리 | 다양한 이벤트 수식어

이벤트 처리

이벤트 처리는 v-on 디렉티브를 사용

단축 표현으로 @ 으로 사용

메서드의 첫번째 매개변수는 event 객체

 

🎉 $event

인라인 핸들링에서 event 객체를 접근하려면 $event 키워드 활용한다.

<button @click="printEventInfo($event)"></button>

 

 

🎉 이벤트 수식어

이벤트를 조작할 때 v-on의 이벤트 수식어로 더 효율적으로 이벤트 메서드 호출

(1) .stop 는 event.stopPropagation() → 이벤트 전파(캡쳐~버블링) 막기

(2) .pervent 는 event.preventDefault() → 기본 기능 막기

(3) .capture 는 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능

(4) .self 는 오로지 자기 자신만 호출할 수 있음. 즉 타깃 요소가 self일때 발동된다.

(5) .once 는 해당 이벤트는 한 번만 실행된다.

(6) .passive 는 일반적으로 모바일 장치 성능 개선을 위해 터치 이벤트 리스너와 함께 사용한다.

 

@click.prevent.stop

 → 기본기능도 막고 전파도 막아

 

 

🎉 키 수식어

키보드 이벤트를 수신할 때 v-on의 키 수식어를 통해 쉽게 특정 키 확인

(1) .enter

(2) .tab

(3) .delete (backspace도 수신함)

(4) .esc

(5) .space

(6) .up

(7) .down

(8) .left

(9) .right

 

@keyup.enter="addTodo"

 →  엔터치면 메서드 addTodo 해

 

 

🎉 시스템 키 수식어

해당 수식어 키가 눌러진 경우에만 마우스 또는 이벤트 키보드 리스너를 트리거할 수 있다.

(1) .ctrl

(2) .alt

(3) .shift

(4) .meta (Mac에서의 커맨드키, Window에서의 윈도우키 등 키보드마다 다름)

(5) .left (마우스 버튼)

(6) .right (마우스 버튼)

(7) .middle (마우스 버튼)

 

@keyup.ctrl.enter="send"

 →  컨트롤+엔터누르면 send 해