[Vue.js] Vue 인라인 핸들러에서 이벤트 객체 접근하기

<template>
  <div>
    <!-- 예제 1: 버튼을 클릭하면 이벤트 객체에 접근하여 로그를 출력하는 예제 -->
    <button @click="handleClick">예제 1 실행</button>

    <!-- 예제 2: 입력 필드에 값을 입력하면 이벤트 객체에 접근하여 입력한 값을 로그로 출력하는 예제 -->
    <input type="text" @input="handleInput" />

    <!-- 예제 3: 마우스를 올리면 이벤트 객체에 접근하여 로그를 출력하는 예제 -->
    <div @mouseover="handleMouseover">마우스를 올려보세요</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('클릭 이벤트 객체:', event);
    },
    handleInput(event) {
      console.log('입력 이벤트 객체:', event);
      console.log('입력한 값:', event.target.value);
    },
    handleMouseover(event) {
      console.log('마우스 오버 이벤트 객체:', event);
    },
  },
};
</script>

Vue에서는 인라인 핸들러에서 네이티브 DOM 이벤트 객체에 접근해야 할 때가 있습니다. 이를 위해 $event 특수한 키워드를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 활용할 수 있습니다.

1. 예제 1: 버튼을 클릭하면 handleClick 메서드가 호출되고, 클릭 이벤트 객체가 메서드에 전달됩니다. 이를 활용하여 클릭한 버튼에 관련된 정보를 확인하거나 로깅할 수 있습니다.

2. 예제 2: 입력 필드에 값을 입력하면 handleInput 메서드가 호출되고, 입력 이벤트 객체가 전달됩니다. 이를 활용하여 입력한 값을 확인하거나 특정 로직에 적용할 수 있습니다.

3. 예제 3: 마우스를 요소 위로 올리면 handleMouseover 메서드가 호출되고, 마우스 오버 이벤트 객체가 전달됩니다. 이를 활용하여 마우스 이벤트에 따른 동작을 수행하거나 로깅할 수 있습니다.

이렇게 Vue의 인라인 핸들러를 사용하여 이벤트 객체에 접근하고 다양한 동작을 수행할 수 있습니다. 이를 통해 개발자는 더욱 유연하고 강력한 이벤트 처리 로직을 작성할 수 있습니다.