[가이드] 이벤트 핸들링 - 필수요소 | Vue

이벤트 수신

v-on 지시어를 사용하여 DOM 이벤트를 수신하고 트리거될 때 일부 JavaScript를 실행할 수 있습니다.

<div id="ex1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
  var example1 = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })
</script>

 

 

메서드 이벤트 핸들러

하지만 많은 이벤트 핸들러의 로직은 더 복잡하므로 JavaScript를 v-on 속성 값으로 유지하는 것은 불가능합니다. 그렇기 때문에 v-on 호출하려는 메서드의 이름도 허용할 수 있습니다.

<div id="ex2">
  <!-- greet은 아래에 정의된 메서드의 이름입니다. -->
  <button v-on:click="great">GREAT</button>
</div>

<script>
  var ex2 = new Vue({
    el: "#ex2",
    data: {
      name: "Vue.js"
    },
    // methods 객체에서 메서드를 정의합니다.
    methods: {
      great : function (event) {
      	// 메서드 내부의`this`는 Vue 인스턴스를 가리 킵니다.
        alert('Hello ' + this.name + '!')
        // `event`는 기본 DOM 이벤트입니다.
        if (event) {
          alert(event.target.tagName)
        }
      }
    }
  })
  // JavaScript에서도 메서드를 호출 할 수 있습니다.
  ex2.great();
</script>

 

 

인라인 핸들러의 메서드

메서드 이름에 직접 바인딩하는 대신 인라인 JavaScript 문에서 메서드를 사용할 수도 있습니다.

<div id="ex3">
  <button v-on:click="say('Hi')">Say Hi</button>
  <button v-on:click="say('What')">Say What</button>
</div>
<script>
  var ex3 = new Vue({
    el: "#ex3",
    methods: {
      say: function(message){
        alert(message)
      }
    }
  })
</script>

때로는 인라인문 핸들러에서 원래 DOM 이벤트에 액세스해야 하는 경우도 있습니다. 특수 $event 변수를 사용하여 메서드에 전달할 수 있습니다.

 

 

이벤트 수식어

event.preventDefault() 또는 event.stopPropagation()을 이벤트 핸들러 내부로 호출해야 하는 것은 매우 일반적인 요구입니다. 메서드 내에서 쉽게 수행 할 수 있지만 메서드가 DOM 이벤트 세부 정보를 처리할 필요없이 순전히 데이터 로직을 사용하는 것이 더 좋습니다.

 

이 문제를 해결하기 위해 Vue는 v-on에 대한 이벤트 수식어를 제공합니다. 수식어는 점으로 표시된 지시문 접미사입니다.

 

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

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

<!-- submit 이벤트가 더 이상 페이지를 다시 로드하지 않습니다. -->
<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>

수식어는 사용한 순서대로 적용되기 떄문에 여러 개의 수식어를 사용할 때 사용 순서가 중요합니다. v-on:click.prevent.self를 사용하면 모든 요소의 기본 동작이 차단되지만 v-on:click.self.prevent를 사용하면 요소 자체의 기본 동작만 차단됩니다.

 

.once

2.1.4+의 새로운 기능

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

네이티브 DOM 이벤트에서만 동작하는 다른 수식어와 달리 .once 수식어는 컴포넌트 이벤트(컴포넌트에서 발생하는 사용자 정의 이벤트)에서도 사용할 수 있습니다.

 

.passive

2.3.0+의 새로운 기능

<!-- 
  event.preventDefault()가 포함된 경우 'onScroll'이 완료될 때까지 
  기다리는 대신 스크롤 이벤트의 기본 동작(스크롤링)이 즉시 발생합니다.                
 -->
<div v-on:scroll.passive="onScroll">...</div>

.passive 수정은 모바일 기기에서 성능 향상에 특히 유용합니다.

 

.passive 및 .prevention을 함께 사용하지 마십시오. .prevent는 무시되고 브라우저에 경고가 표시될 수 있습니다. .passive는 브라우저와 통신하여 이벤트의 기본 동작을 방지하지 않습니다.

 

 

Key 수식어

키보드 이벤트를 청취할 때 특정 키를 확인해야 하는 경우가 많습니다. Vue는 v-on Key 이벤트를 수신 할 때 Key 수식어를 추가 할 수 있습니다.

<!-- `key`가 `Enter` 인 경우`vm.submit ()`만 호출합니다. -->
<input v-on:keyup.enter="submit">

KeyboardEvent.key을 통해 노출된 유효한 키 이름을 kebab-case로 변환하여 수식어로 직접 사용할 수 있습니다.

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

위의 예에서 핸들러는 $event.key가 PageDown과 같을 때만 호출됩니다.

 

Key 코드

keyCode 이벤트 사용은 더 이상 사용되지 않으며, 새 브라우저에서 지원되지 않을 수 있습니다.

 

keyCode 속성도 사용할 수 있습니다.

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

Vue는 레거시 브라우저 지원에 필요한 경우 가장 일반적으로 사용되는 key code에 대한 별칭을 제공합니다.

 

• .enter

• .tab

• .delete ('Delete'및 'Backspace' 키 모두 캡처)

• .esc

• .space

• .up

• .down

• .left

• .right

 

일부 키(.esc 및 모든 화살표 키)는 IE9에 일치하지 않는 key 값을 가지므로 IE9를 지원해야 하는 경우 이러한 기본 제공 별칭을 선호해야 합니다.

 

전역 config.keyCodes 객체를 통해 사용자 정의 key 수식어 별칭 을 정의 할 수도 있습니다.

// "v-on:keyup.f1"을 사용하도록 설정합니다.
Vue.config.keyCodes.f1 = 112

 

 

시스템 키 수식어

2.1.0+의 새로운 기능

 

다음 수식어를 사용하여 해당 수식어 key를 누를 때만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다.

 

• .ctrl

• .alt

• .shift

• .meta

 

참고 : Macintosh 키보드에서 meta는 명령 키 (⌘)입니다. Windows 키보드에서 meta는 Windows 키 (⊞)입니다. Sun Microsystems 키보드에서 meta는 단색 다이아몬드 (◆)로 표시됩니다. 특정 키보드, 특히 MIT 및 Lisp 기계 키보드와 Knight 키보드, 우주 생도 키보드와 같은 후속 제품에서는 메타가 "META"로 표시됩니다. Symbolics 키보드에서 meta는 "META"또는 "Meta"로 표시됩니다.

 

예를 들면 :

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

시스템 Key 수식어는 keyup 이벤트와 함께 사용할 경우 이벤트를 발생할 때 수식어 키가 눌려있어야 합니다. 즉, keyup.ctrl은 ctrl을 누른 상태에서 키를 놓는 경우에만 트리거됩니다. ctrl 키만 놓으면 트리거되지 않습니다.

 

.exact

2.5.0+의 새로운 기능

.exact 수식어를 사용하여 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위한 정확한 조합을 만들 수 있습니다.

<!-- Alt 또는 Shift와 함께 눌린 경우에도 작동합니다 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- Ctrl을 누르고 다른 키를 누르지 않은 경우에만 작동합니다 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 수식어를 누르지 않을 때만 작동합니다 -->
<button v-on:click.exact="onClick">A</button>

 

마우스 버튼 수식어

2.2.0+의 새로운 기능

 

• .left

• .right

• .middle

 

이러한 수식어는 특정 마우스 버튼이 트리거 되었을 때 이벤트 핸들러를 실행합니다.

 

 

HTML 이벤트 리스너를 사용하는 이유

Vue에서 사용하는 이벤트 리스너 등록 방법은 관심사 분리(separation of concerns) 규칙에 어긋난다고 생각할 수 있습니다. 모든 Vue 핸들러 기능과 식이 현재 보기를 처리하는 ViewModel에 엄격하게 바인딩되어 있으므로 유지 관리 문제가 발생하지 않습니다. 

※ 관심사 분리: JavaScript와 HTML, CSS 분리하는 것, 즉 각각의 역할 별로 분리하는 것

 

v-on을 사용하여 이벤트를 핸들링하는 몇가지 장점이 있습니다.

 

1. HTML 템플릿을 스키밍하여 JS 코드 내에서 처리기 함수 구현을 찾는 것이 더 쉽습니다.

2. JS에서 이벤트 리스너를 수동으로 연결할 필요가 없기 때문에 ViewModel 코드는 순수 로직이고 DOM이 없을 수 있습니다. 이렇게하면 테스트가 더 쉬워집니다.

3. ViewModel이 파괴되면 모든 이벤트 리스너가 자동으로 제거됩니다. 이벤트 제거에 대한 걱정이 필요 없게 됩니다.