$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