이벤트 핸들링

이벤트 리스닝하기

 

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용, DOM 이벤트를 수신하고 트리거 될 때 사전 정의해둔 js 코드를 실행

ex> v-on:click="handler" or @click="handler"

 

두가지 핸들러 값

1. 인라인 핸들러 - 이벤트가 트리거될 때 실행되는 인라인 js (네이티브 oncilck 속성과 유사)

2. 메서드 핸들러 - 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로

 

인라인 핸들러

아래처럼 간단한 경우에 사용

const count = ref(0)

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

 

 

메서드 핸들러

v-on 은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행가능

 

const name = ref('Vue.js')

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


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

 

메서드 핸들러는 이것을 트리거하는 네이티브 DOM 이벤트 객체를 자동으로 수신, 

event.target.tagName 을 통해 이벤트를 전달하는 엘리먼트에 접근 가능

 

메서드 vs 인라인 구분

템플릿 컴파일러가 v-on 값인 문자열이 유요한 js 식별자 또는 속성에 접근 가능한 경로인지 확인해서 감지

foo, foo.bar foo['bar'] <<<<메서드 핸들러 foo() count++ << 인라인 핸들러로 처리

 

 

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

function say(message) {
  alert(message)
}


//tem

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

 

 

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

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

 

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

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


function warn(message, event) {
  // 이제 네이티브 이벤트 객체에 접근할 수 있습니다.
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

 

 

이벤트 수식어

 

수정자를 사용할 때는 관련 코드가 동일한 순서로 생성되므로 순서가 중요합니다. 따라서 @click.prevent.self를 사용하면 앨리먼트 자체와 그 자식에 대한 클릭의 기본 동작을 방지하는 반면, @click.self.prevent는 앨리먼트 자체에 대한 클릭의 기본 동작만 방지

<!-- 클릭 이벤트 전파가 중지됩니다. -->
<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>

 

capture, .once 및 .passive 수식어는 네이티브 addEventListener 메서드의 옵션을 반영

 

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

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

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

.passive 수식어는 일반적으로 모바일 장치의 성능 향상을 위해 터치 이벤트 리스너와 함께 사용

.passive는 브라우저에게 이벤트의 _기본 동작을 방지(prevent)하지 않겠다_는 의도를 전달한 것입니다. 따라서 .passive와 .prevent를 함께 사용해서는 안되며, 그렇게 할 경우 브라우저(콘솔)에서 경고 메세지를 볼 수 있음

 

입력키 수식어

특정 키를 확인해야하는 경우

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

 

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

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

 

 

나머지 수식어

 

https://v3-docs.vuejs-korea.org/guide/essentials/event-handling.html

이벤트 핸들링 | Vue.js