[Vue.js] Vue 이벤트 캡처 모드로 핸들러 추가하기

<template>
  <div>
    <!-- 예제 1: 이벤트 캡처 모드로 클릭 이벤트를 처리합니다. -->
    <div @click.capture="doThis">
      내부 엘리먼트를 클릭하세요
      <button>내부 버튼</button>
    </div>

    <!-- 예제 2: 이벤트 캡처 모드로 포커스 이벤트를 처리합니다. -->
    <input type="text" @focus.capture="handleFocus" />

    <!-- 예제 3: 이벤트 캡처 모드로 키보드 이벤트를 처리합니다. -->
    <div @keydown.capture="handleKeyDown">키보드 입력하세요</div>
  </div>
</template>

<script>
export default {
  methods: {
    // 이벤트 핸들러입니다. 캡처 모드로 이벤트를 처리합니다.
    doThis() {
      console.log('doThis 메서드가 호출됨');
    },
    handleFocus() {
      console.log('포커스가 발생했습니다.');
    },
    handleKeyDown() {
      console.log('키보드 입력이 발생했습니다.');
    },
  },
};
</script>

Vue에서는 이벤트 핸들러에 .capture 수식어를 사용하여 이벤트를 캡처 모드로 처리할 수 있습니다. 이를 통해 내부 엘리먼트에서 발생한 이벤트가 외부 엘리먼트에서 발생한 이벤트보다 먼저 처리됩니다.

1. 예제 1: 부모 엘리먼트에서 발생한 클릭 이벤트를 캡처 모드로 처리합니다. 이때 내부 엘리먼트인 버튼을 클릭하더라도 먼저 doThis 메서드가 실행됩니다.

2. 예제 2: 입력 필드에 포커스 이벤트를 캡처 모드로 처리합니다. 이를 통해 입력 필드에 포커스가 발생하면 먼저 handleFocus 메서드가 실행됩니다.

3. 예제 3: div 요소에 키보드 이벤트를 캡처 모드로 처리합니다. 이를 통해 키보드 입력이 발생하면 먼저 handleKeyDown 메서드가 실행됩니다.

Vue의 이벤트 캡처 모드를 사용하면 이벤트의 순서를 정확히 제어할 수 있습니다. 이를 통해 원하는 순서대로 이벤트를 처리할 수 있습니다.