Vue 이벤트 수식어

Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다.
HTML에는 <a>나 <input> 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있구요.
여기에서 Vue.js는 javascript로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀더 쉽게 구현할 수 있는 방법을 제공하고 있습니다.

이벤트 구현

Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다.
v-on은 줄여서 @로 대체할 수 있습니다.

예>

copy html<!-- 해당 태그를 클릭 했을 경우 goodgood() 메소드 실행. --> <button id="goodboy" v-on:click="goodgood">좋아요</button> <button id="goodboy" @click="goodgood">좋아요</button>

좋아요 버튼을 클릭하면 javascript로 작성된 goodgood() 메서드를 호출합니다.

활용 이벤트 명

아래의 이벤트명을 v-on 또는 @와 같이 사용하면 됩니다.

v-on:click="..."
@dblclick="..."
@mouseover=".."

이벤트명설명

click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	<Form>이 제출될 때 실행함
reset	<Form>이 재설정될 때 실행함
select	<select>의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

이벤트 수식어

Vue.js에서는 복잡한 javascript구현을 간단히 처리하기 위해서 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.

예>

copy html<!-- 해당 태그를 클릭 했을 경우 a태그 이벤트를 막고 goodgood() 메소드 실행. --> <a id="goodboy" v-on:click.prevent="goodgood">좋아요</a> <a id="goodboy" @click.stop="goodgood">좋아요</a>

좋아요 버튼을 클릭하면 javascript가 <a>태그가 기본 수행하는 href="..." 이벤트를 중지시키고 goodgood() 메서드만 호출합니다.

기본 수식어

수식어 명설명비고

.prevent	기본 이벤트의 자동 실행을 중단 시킴	preventDefault() 과 동일한 기능
.stop	이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단)	stopPropagation() 과 동일한 기능
.capture	포착 단계에서만 이벤트를 발생시킴	내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함
.self	발생 단계에서만 이벤트를 발생시킴	event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행안됨
.once	이벤트를 한번만 실행 시킴
.passive	기본 이벤트를 취소할 수 없게 함	있을지 모를 .preventDefault()를 실행 안되게 함.

copy html<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. --> <div v-on:scroll.passive="onScroll">...</div>키 수식어

키(Key)에 대한 수식어는 원래 숫자를 이용하는 것이였으나 사람이 숫자를 기억하기 힘들기 때문에 키값에 해당하는 수식어를 별도의 이름으로 지정하여 활용합니다.

copy html<!-- keyCode가 13일 때만 `vm.submit()`을 호출합니다 --> <input @:keyup.13="submit"> <!-- keyCode가 13 대신 .enter로 지정하여 활용합니다. 위의 코드와 동일하게 작동합니다. --> <input @keyup.enter="submit">

1개 키 사용법
<input @click.enter="...">
<input @keyup.tab="...">
<input @keyup.space="...">

여러 키 사용법
<input @click.ctrl.enter="...">
<input @keyup.alt.23="...">
<input @keyup.shift.13="...">

키 수식어 명고유 키 값비고

.enter	13
.tab	9
.delete	8	“Delete” 와 “Backspace” 키 모두 해당
.esc	27
.space	32
.up	33
.down	34
.left	37
.right	39
.ctrl	17
.alt	18
.shift	16
.meta	매킨토시에서 command 키, Windows에서는 windows 키

그 외의 키들은 개별로 커스텀하게 제작하여 사용할 수 있습니다.

마우스 버튼 수식어

키(Key) 수식어 처럼 마우스 버튼에 대한 수식어도 아래와 같습니다.

키 수식어 명설명

.left	마우스 왼쪽 버튼 클릭
.right	마우스 오른쪽 버튼 클릭
.middle	마우스 가운데 휠 버튼 클릭

예>

copy html<!-- 마우스 오버 후 오른쪽 버튼 클릭을 했을 경우 `goodgood()`을 호출합니다 --> <div id="goodboy" v-on:mouseover.left="goodgood"></div> <!-- 마우스 오버 후 왼쪽 버튼 클릭 했을 경우 `goodgood()`을 호출합니다 --> <div id="goodboy" @mouseover.right="goodgood"></div>

출처: https://ux.stories.pe.kr/119 [UX 공작소]