$event 파라미터
v-on을 통해서 실행할 함수를 연결할수있는데, 함수에 event Parameter에 대해 알아보자

함수 인자가 없을 경우 event

const printEventInfo = (event) => {
    console.log('event.target', event.target);
    console.log('event.target.tagName', event.target.tagName);
  }

<button @click="printEventInfo">
  $event를 명시하지않는 버튼
</button>

button태그에 따로 함수인자를 선언안하면 기본적으로 첫번째 변수는 event로 인식한다.

함수 인자를 명시적으로 가지고 올 경우

const printEventInfoUsingEvent = (message, event) => {
  console.log('message', message);
  console.log('event.target', event.target);
  console.log('event.target.tagName', event.target.tagName);
}

<button @click="printEventInfoUsingEvent('Hello Vue3', $event)">
  $event를 사용한 버튼
</button>

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...