[vue3 공식문서 번역]Essentials.8.Event Handling

이벤트 리스닝

트리거 됐을 때, 자바스크립트 코드를 실행하고 돔 이벤트를 듣기위해 @(at) 기호로 줄여서쓰는, v-on 지시어를 사용할 수 있다. 사용법은 v-on:click="handler" 이며, 줄여서 @click="handler"로 사용할 수 있다.

 

핸들러 값은 다음중 하나가 될 수 있다:

1. 인라인 핸들러: 이벤트가 트리거 됐을 때 실행할 인라인 자바스크립트 (onclick 어트리뷰트와 유사)

2. 메소드 핸들러: 컴포넌트에 정의된 메소드를 지목하는 프로퍼티 이름이나 경로

 

인라인 핸들러

인라인 핸들러는 보통 간단한 경우에 사용한다. 예로 :

const count = ref(0)

<button @click="count++">Add 1</button>
<p>Count is: {[ count }}</p>

메소드 핸들러

많은 이벤트 핸들러의 로직이 더 복잡하고, 인라인 핸들러로는 구현이 힘들 수 있다. v-on으로 당신이 호출하고 싶은 컴포넌트 메소드의 경로나 이름을 사용할 수 있는 이유이다.

 

예를 들면:

const name = ref('Vue.js')

function greet(event) {
  aler(`Hello ${name.value}!`)
  // 'event'는 네이티브 DOM 이벤트이다.
  if (event) {
    alert(event.target.tagName)
  }
}

<!-- 'greet'는 위에 정의된 메소드의 이름이다. -->
<button @click="greet">Greet</button>

메소드 핸들러는 트리거하는 네이티브 DOM 이벤트 객체를 자동적으로 받는다 - 위 예제와 같이, event.target.tagName으로 우리가 접근한 엘리먼트에 이벤트를 전파할 수 있다.

 

 

메소드 vs 인라인 감지

템플릿 컴파일러는 v-on 값인 문자가 프로퍼티 접근 경로인지 자바스크립트 식별자인지 판별해서 메소드 핸들러를 감지할 수 있다.  예로, foo, foo.bar와 foo['bar']는 메소드 핸들러로 다뤄지는 반면, foo()와 count__는 인라인 핸들러로 다뤄진다.

 

인라인핸들러에서 메소드 부르기

메소드 이름을 직접 바인딩하는 대신, 인라인 핸들러에서 메소드를 호출할 수 있다. 네이티브 이벤트 대신 메소드 커스텀 아규먼트를 넘길 수 있게 해준다.

function say(message) {
  alert(message)
}

<button @click="say('hello')">Say hello</button>
<button @click=say('bye')">Say bye</button>

 

인라인 핸들러에 있는 이벤트 아규먼트 접근하기

때떄로, 인라인 핸들러에있는 오지지널 DOM 이벤트에 접근할 필요가 있다. 인라인 화살표 함수를 사용하거나, 특별한 $event 변수를 사용해서 메소드에 값을 넘길 수 있다:

<!-- 특별한 변수인 $event 사용하기
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 인라인 화살표 함수 사용하기 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // native event에 접근할 수 있다.
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

 

이벤트 접근제어자

이벤트핸들러에서 event.preventDefault()나 event.stopPropagation()을 호출하는 일은 매우 흔하다. 비록 메소드 내에서 쉽게 할 수 있지만, 메소드가 DOM 이벤트 상세를 다루는 것보다 순수한 데이터로직이 되는 것이 더 낫다. 

 

이 문제를 해결하기 위해, 뷰는 v-on에 이벤트 접근제어자를 제공한다. 접근제어자는 점(.)으로 나타내는 접미 지시어 이다.

.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.selt="doTaht">...</div>

TIP 같은순서로 관련 코드가 생성되기 때문에, 접근지시자를 사용할 때 순서가 중요하다. 그러므로 @click.prevent.self 사용은 엘리먼트와 그 하위에에 대한 클릭 기본 동작을 막는 반면,  @click.self.prevent는 엘리먼트에대한 클릭 기본 동작만 막을 것이다.

.capture, once, .passive 접근제어자는 addEventListener메소드의 옵션과 동일하다.

<!-- 이벤트 리스터를 추가할 때 캡쳐모드를 사용-->
<!-- 즉, 안에있는 엘리먼트에 타겟팅하는 이벤트는 그 엘리먼트에 의해 다뤄지기전에 여기서 다뤄진다.
<div @click.capture="doThis">...</div>

<!-- 클릭이벤트는 한번만 트리거 된다 -->
<a @click.once="doThis"></a>

<!-- 스크롤 이벤트의 기본 동작은 즉시 일어난다 -->
<!-- onScroll이 완료되는걸 기다리는 대신에-->
<!-- 'event.preventDefault()'를 담고 있는 경우에 -->
<div @scroll.passive="onScroll">...</div>

.passive 접근제어자는 모바일환경에서 퍼포먼스를 개선하기위한 터치 이벤트 리스너로 일반적으로 사용된다.

TIP .passive와 .prevent를 함께 쓰지 마라. 왜냐하면 .passive는 이미 브라우저에게 이벤트의 기본 동작을 막으려는 의도가 없음을 가르킨다. 그래서 두 개를 같이 쓰면, 브라우저는 경고할 것이다.

키 접근제어자

키보드 이벤트를 들을 때, 우리는 종종 특별한 키를 체크할 필요가 있다. 뷰는 키이벤트를 리스닝할 때, v-on이나 @의 키 접근 제어자를 추가하는걸 허용한다.

<!-- 키가 엔터일 때, vm.submit()을 호출 -->
<input @keyup.enter="submit" />

KeyboardEvent.key를 통해 노출된 유요한 키름을 케밥 케이스로 변환하여 접근제어자로 직접 사용할 수 있습니다.

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

위 예제에서, 핸들러는 'PageDown'과 동일한 $event.key를 호출할 것입니다.

 

키 별칭

뷰는 흔히 사용할 수 있는 키의 참조를 제공합니다:

.enter
.tab
.delete ("Delete"와 "Backspace"키 둘다 잡음)
.esc
.space
.up
.down
.left
.right

시스템 접근제어 키

상응하는 접근제어키가 눌렸을 때 키보드 이벤트 리스너나 마수스에 접근제어자를 사용할 수 있다.

.ctrl
.alt
.shift
.meta

주의 맥킨토시 키보드에서, meta는 커맨드키다. 윈도우 키보드에서, meta는 윈도우 키다.

예를들면:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

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

TIP 접근제어 키는

 

.exact 접근제어자

.exact 접근제어자는 이벤트를 트리거할 필요가 있는 시스템 접근제어자의 정확한 혼합의 조작을 허용한다.



<!-- Alt나 Shift가 둘렸을 때도 실행 한다 -->
<button @click.ctrl="onClick">A</buttn>

<!-- 다른키는 누르지 않고 컨트롤키만 눌렀을 때만 실행한다 -->
<button click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 접근제어자가 눌리지 않았을 때만 실행한다 -->
<button @click.exact="onClick">A</button>

마우스 버튼 접근제어자

.left
.right
.middle

이 접근제어자들은 특정 마우스 버튼에 의해 트리거되는 이벤트를 위한 핸들러를 엄격히 제한한다.