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>
