Vue - 이벤트 핸들링

이벤트 리스닝 하기

• v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행
• v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용

인라인 핸들러

• 이벤트가 트리거될 때 실행되는 인라인 JavaScript

<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>

메서드 핸들러

• 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로
• v-on은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행할 수 있게 구현

function greet(event) {
  alert(`안녕 ${name.value}!`)
  // 'event'는 네이티브 DOM 이벤트 객체입니다.
  if (event) {
    alert(event.target.tagName)
  }
}

//`greet`는 위에서 정의한 메서드의 이름입니다.
<button @click="greet">환영하기</button>

인라인 핸들러에서 메서드 호출

• 메서드 이름을 직접 바인딩하는 대신, 인라인 핸들러에서 메서드를 호출
• 네이티브 이벤트 객체 대신 사용자 지정 인자를 메서드에 전달할 수 있다

function say(message) {
  alert(message)
}

<button @click="say('안녕')">안녕이라고 말하기</button>
<button @click="say('잘가')">잘가라고 말하기</button>

인라인 핸들러에서 이벤트 객체 접근

• 인라인 핸들러에서 네이티브 DOM 이벤트 객체에 접근해야 하는 경우 특수한 키워드인 $event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있다

<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
  제출하기
</button>

<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
  제출하기
</button>

복합 이벤트 핸들러

• 연산자를 사용하여 이벤트 핸들러 안에서 복합 메소드를 지정할 수 있다

<!-- one()과 two() 둘 다 버튼 클릭 이벤트를 실행할 수 있다. -->
<button @click="one($event), two($event)">
  Submit
</button>

이벤트 수식어

• 이벤트 핸들러 내에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는 것은 흔한 일이지만 메서드가 DOM 이벤트에 대한 세부적인 처리 로직 없이 오로지 데이터 처리 로직만 있다면 코드 유지보수에 더 좋다.
• .stop, .prevent, .self, .capture, .once, .passive

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

<!-- submit 이벤트가 더 이상 페이지 리로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수식어를 연결할 수 있습니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 이벤트에 핸들러 없이 수식어만 사용할 수 있습니다. -->
<form @submit.prevent></form>

<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행됩니다. -->
<!-- 예를 들어 자식 엘리먼트에서 클릭 액션이 있으면 핸들러가 실행되지 않습니다. -->
<div @click.self="doThat">...</div>

<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, 여기에서 먼저 핸들러가 실행됩니다. -->
<div @click.capture="doThis">...</div>

<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>

<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다.        -->
<div @scroll.passive="onScroll">...</div>

입력 키 수식어

• 키보드의 키를 누를 때 추가할 수 있는 수식어

<!-- `key`가 `Enter`일 때만 `submit`을 호출합니다 -->
<input @keyup.enter="submit" />

KeyboardEvent.key를 통해 유효한 입력키 이름을 kebab-case로 변환하여 수식어로 사용할 수 있다

<input @keyup.page-down="onPageDown" />

핸들러는 $event.key === PageDown일 때만 호출된다

• 입력키 : .enter, .tab, .delete ("Delete" 및 "Backspace" 키 모두 캡처), .esc, .space, .up, .down, .left, .right
• 시스템 수식어 키 : .ctrl, .alt, .shift, .meta
• 마우스 버튼 수식어 : .left, .right, .middle(휠 버튼)

.exact 수식어

• 해당 키만 눌렀을 때 동작하고 다른 키와 조합해서 눌렀을 때는 동작하지 않는다

<!-- Ctrl과 함께 Alt 또는 Shift를 누른 상태에서도 클릭하면 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

<!-- 오직 Ctrl만 누른 상태에서 클릭해야 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 입력키를 누르지 않고 클릭해야지만 실행됩니다. -->
<button @click.exact="onClick">A</button>

 

 

참고 : https://ko.vuejs.org/guide/essentials/event-handling.html#key-modifiers