[javascript] Vue.js의 이벤트 처리

01 Dec 2023

Vue.js는 이벤트 처리를 쉽게 할 수 있는 기능을 제공합니다. 이벤트 처리는 사용자의 액션에 대한 응답으로 어떤 동작을 실행하는 것을 말합니다. 이벤트 처리를 통해 사용자와 상호작용하는 웹 애플리케이션을 만들 수 있습니다.

이벤트 핸들러

Vue.js에서 이벤트 처리를 위해 사용되는 핵심 개념은 이벤트 핸들러입니다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행될 함수입니다. Vue.js에서 제공하는 v-on 디렉티브를 사용하여 이벤트 핸들러를 등록할 수 있습니다.

<button v-on:click="handleClick">Click me</button>

위의 예제에서 v-on:click은 클릭 이벤트가 발생했을 때 handleClick 메소드를 호출하도록 지정합니다. handleClick은 Vue 인스턴스 내에 정의된 메소드입니다.

이벤트 핸들러 함수는 첫 번째 매개변수로 이벤트 객체를 받습니다. 이벤트 객체를 통해 이벤트에 대한 상세 정보를 얻을 수 있습니다.

handleClick(event) {
  console.log(event.target);
}

위의 예제에서 event.target은 클릭 이벤트가 발생한 요소를 가리킵니다. 이를 통해 사용자가 어떤 요소를 클릭했는지 알 수 있습니다.

Vue.js는 이벤트 수식어를 통해 이벤트 처리를 더욱 세밀하게 제어할 수 있는 기능을 제공합니다. 이벤트 수식어는 점으로 표시되며, stop, prevent, capture, self, once 등 다양한 옵션을 제공합니다.

<button v-on:click.stop="handleClick">Click me</button>

위의 예제에서 .stop은 이벤트 버블링을 중지시킵니다. 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 것을 말합니다.

Vue.js에서는 사용자가 정의한 이벤트도 처리할 수 있습니다. 사용자 정의 이벤트는 this.$emit 메소드를 사용하여 발생시킬 수 있습니다.

this.$emit('custom-event');

위의 예제에서 custom-event라는 사용자 정의 이벤트를 발생시킵니다. 이벤트를 처리하기 위해서는 부모 컴포넌트에서 v-on 디렉티브를 사용하여 이벤트 핸들러를 등록해야 합니다.

<child-component v-on:custom-event="handleCustomEvent"></child-component>

위의 예제에서 child-component 컴포넌트에서 발생한 custom-event를 handleCustomEvent 메소드를 통해 처리할 수 있습니다.