[Vue.js] 이벤트 핸들링 (v-on)

Donghyun Kim·2022년 7월 5일

@click="event": 클릭했을 때 실행
@change="event": 요소가 변경될 때 실행
@dbclick="event": 더블 클릭했을 때 실행
@mouseover="event": 마우스의 포인트가 요소 위로 올라왔을 때 실행
@submit="event": form이 제출될 때 실행
@reset="event": form이 재설정될 때 실행
@select="event": select 값이 선택되었을 때 실행
@focus="event": 태그에 포커스가 있을 때 실행
@keyup="event": 키보드의 키를 놓았을 때 실행
@keydown="event": 키보드의 키를 눌렀을 때 실행
@keypress="event": 키보드의 키를 눌렀다가 놓았을 때 실행
...

이벤트 청취

v-on 디렉티브를 사용해서 DOM 이벤트를 듣고, 트리거 될때 Javascript를 실행할 수 있다.

<div id="ex1">
	<button v-on:click="counter + 1">Add 1</button>
	<p>	{{ counter }} </p>
</div>

var example = new Vue({
	el: "#ex1",
	data: {
		counter: 0;
	}
})

메소드 이벤트 핸들러

많은 이벤트 핸들러의 로직은 속성 값에 넣지 않고, 특정 메소드 이름을 담아서 이벤트를 실행한다.

<div id="example-2">
  <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
	el: "#example-2",
	data: {
		name: 'Vue.js'
	},
	methods: {
		greet: function(event){
			alert('Hello ' + this.name + '!')
            // `event` 는 네이티브 DOM 이벤트입니다
            if (event) {
              alert(event.target.tagName)
            }
	}
})

또한 JavaScript를 이용해서 메소드를 호출할 수 있다.
example2.greet() // => 'Hello Vue.js!'
인라인 메소드 핸들러
메소드 이름을 직접 바인딩하는 대신, 인라인 Javascript 구문에 메소드를 사용할 수 있다.

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

이벤스 수식어

이벤트 핸들러 내부에는 event.prevendDefault() 나 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이다.

메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 세부사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋을 것이니 이 문제를 해결하기 위해 vue는 v-on 이벤트에 이벤트 수식어를 제공한다.

수식어는 점으로 표시된 접미사다.
수식어는 체이닝이 가능하고, 단순히 수식어만 사용할 수도 있다.

.stop: 클릭 이벤트 전파를 중단한다.
.prevent: submit 이벤트가 페이지를 다시 로드하지 않는다.
.capture: 이벤트 리스너를 추가할 때, 캡쳐모드를 사용한다.
          내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리한다.
.self: event.target이 엘리먼트 자체인 경우에만 트리거를 처리한다.
.once: 클릭 이벤트는 최대 한 번만 트리거 된다.
.passive:

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

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

키 수식어

키보드 이벤트를 동작할 때, 종종 공통 키 코드를 확인해야 한다.
vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

<input v-on:keyup.13="submit">

시스템 수식어 키

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

-.ctrl
-.alt
-.shift
-.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact 수식어
exact 수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합을 눌러야 하는 것을 보여준다.

<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- Ctrl 키만 눌려있을 때만 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다. -->
<button @click.exact="onClick">A</button>