본문 바로가기

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

이벤트 구현

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

예>

<!-- 해당 태그를 클릭 했을 경우 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구현을 간단히 처리하기 위해서 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.

예>

<!-- 해당 태그를 클릭 했을 경우 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()를 실행 안되게 함.
<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>
키 수식어

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

<!-- 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 마우스 가운데 휠 버튼 클릭

예>

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

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

UX 공작소

고급지게 만들어 저렴하게 배포는 공작소