vue 3 - 이벤트 핸들링

😎 vue 3 - 이벤트 핸들링

composition API를 기준으로 합니다

✅  이벤트 핸들링

v-on 디렉티브를 통해 이벤트를 사용할 수 있으며 일반적으로 단축해서 @ 기호를 사용한다
v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용 가능하다

사용 방식은 다음과 같다

1. 인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인 JavaScript
2. 메서드 핸들러: 컴포넌트에 정의된 메서드

<p>숫자 값은: {{ count }}</p>

// 인라인
<button @click="count++">1 추가</button>

// 메서드
<button @click="countIncrement">1 추가</button>

const count = ref(0)
const countIncrement = () => {
  count.value++
}

✅  이벤트 객체 접근

특수 키워드 $event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있다

<!-- $event 사용 -->
<button @click="warn('Event vue $event', $event)">
  제출하기
</button>

<!-- 인라인 화살표 함수 사용 -->
<button @click="event => warn('Event vue event', event)">
  제출하기
</button>

<!-- 메서드 방식 -->
<button @click="checkEventTarget">checkEventTarget</button>

const warn=(message, event) => {
  // 네이티브 이벤트 객체에 접근할 수 있다
  if (event) {
    event.preventDefault()
  }
  console.log(`message~! : ${message}, / 이벤트 객체 : ${event.target}`)
}

const checkEventTarget = (event) => {
  console.log(event.target)
}

아래의 결과처럼 event 객체를 동일하게 불러온다

$event, 인라인 방식

메서드 방식

💡 $ 접두사

사용자에게 노출되는 vue의 내장 객체를 의미하며 핵심 API에 사용한다

$ 속성이 현재 구성 요소가 아닌 다른 위치에 정의되어 있음을 표시하는 역할을 한다

즉, $ 접두사는 vue의 전역 속성을 의미한다

 

✅  이벤트 수식어

점(.)으로 시작하는 지시적 접미사인 이벤트 수식어를 제공한다

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

아래 예제처럼 다양한 활용이 가능하다

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

<!-- 클릭 이벤트 전파가 중지된다 -->
<a @click.stop="doThis">a태그</a>
<div>
    이벤트 전파 stop
    <div @click="onClick">1번 div
      <div @click.stop="eventStop">2번 div eventStop
        <div @click="innerClick">3번 div inner</div>
      </div>
    </div>
</div>

const onClick=(e)=>{
  console.log("onClick", e.target)
}
const eventStop=(e)=>{
  console.log('event stop', e.target)
}
const innerClick(e)=>{
  console.log('event stop', e.target)
}

<!-- 수식어 연결 가능 (체이닝) -->
<a @click.stop.prevent="doThat"></a>

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

<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행된다 -->
<!-- li에서의 클릭 액션 핸들러는 실행되지 않는다 -->
<ul @click.self="doThat">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

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

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

const ulClick=(e)=>{
  console.log('ul click', e.target.tagName, e.target.innerHTML)
}
const liClick=(e)=>{
  console.log('li click ~ ', e.target.tagName, e.target.innerHTML)
}

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

<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생     -->
// .passive 수식어는 일반적으로 모바일 장치의 성능 향상을 위해 터치 이벤트 리스너와 함께 사용
<div @scroll.passive="onScroll">...</div>

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

 

✅  입력키 수식어

@keyup, keydown, keypress를 통해 사용한다

<!-- `key`가 `Enter`일 때만 `submit`을 호출 -->
<input @keyup.enter="submit" />
<input @keydown.tab="submit" />
<input @keypress.enter="submit" />

Vue는 일반적으로 사용되는 키에 대한 별칭을 제공한다

• .enter
• .tab
• .delete ("Delete" 및 "Backspace" 키 모두 캡처)
• .esc
• .space
• .up
• .down
• .left
• .right

시스템 입력키 수식어

• .ctrl
• .alt
• .shift
• .meta 커멘드 키(⌘) or Windows 키(⊞)

exact

.exact 수식어를 사용하면 이벤트를 트리거하는 데 필요한 시스템 수식어의 정확한 조합을 제어할 수 있다

<div>alt와 함께 다른 시스템 입력키를 누른 상태에서도 클릭하면 실행된다</div>
<button @click.alt="onClick">A</button>

<div>오직 alt만 누른 상태에서 클릭해야 실행된다</div>
<button @click.alt.exact="onAltClick">A</button>

<div>시스템 입력키를 누르지 않고 클릭할 때만 실행된다</div>
<button @click.exact="onClick2">A</button>

 

 

 

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

이벤트 핸들링 | Vue.js