Javascript 이벤트 핸들링

웹페이지 내에서 클라이언트의 상호작용을 감지하기 위해 이벤트 핸들러 함수를 사용한다.

이벤트 핸들러 함수는 특정 이벤트가 발생했을 때 실행되며, 이 함수는 이벤트에 대한 정보를 포함하는 이벤트 객체를 매개변수로 받을 수 있다.

 

Vue.js에서는 v-on 디렉티브(또는 @로 축약하여 사용)를 사용하여 DOM 이벤트를 감지하고 메소드를 호출한다. 이벤트 객체는 Vue에서 자동으로 함수로 전달되지만, 때로는 이 이벤트 객체를 직접 다루거나 추가 인자를 전달할 필요가 있다.

 

<input type="text" v-on:input="setName($event, 'Kim')" />

setName(event, lastName) {
  this.name = event.target.value + ' ' + lastName;
}

 

위 코드에서 input 태그의 v-on:input 디렉티브는 입력 필드에 텍스트 입력이 있을 때마다 setName 함수를 호출하도록 설정한다. 이 때, $event는 JavaScript에서 생성되는 기본 이벤트 객체를 Vue 템플릿 내에서 참조할 수 있게 해주는 변수다.

 

$event 객체를 사용함으로써 Vue 메소드 안에서 이러한 정보에 접근할 수 있다. 예를 들어, event.target.value는 이벤트가 발생한 요소의 현재 값(예: 텍스트 입력 필드의 내용)을 반환한다.

 

$ 기호를 붙이는 이유는, 전달되는 것이 DOM 이벤트 객체인지 아니면 Vue에서 정의한 데이터 프로퍼티 또는 다른 요소들인지 구분하기 위함이다. $ 기호 없이 event 이렇게 사용한다면 Vue 인스턴스에서 event를 데이터 프로퍼티로 인지할 것이다.