[콜럼Vue스] 이벤트 수식어 (Once, 키코드, 마우스, exact )

이벤트 수식어(Event Modifiers)는 Vue.js에서 이벤트 처리 시 특정 동작을 쉽게 제어할 수 있게 해주는 기능임. 수식어를 사용하면 이벤트의 기본 동작을 막거나, 특정 상황에서만 이벤트가 실행되도록 제어할 수 있음. 수식어는 이벤트 디렉티브(@click 등) 뒤에 점(.)을 붙여서 사용함.

 

1. .once: 한 번만 실행

.once 수식어는 이벤트가 한 번만 실행되도록 함. 즉, 이벤트가 발생한 후 자동으로 이벤트 리스너가 제거되기 때문에 해당 이벤트는 다시 발생하지 않음.

<button @click.once="handleClick">한 번만 클릭</button>

<script>
  new Vue({
    methods: {
      handleClick() {
        alert('이 이벤트는 한 번만 실행됩니다.');
      }
    }
  }).$mount('#app');
</script>

• 버튼을 클릭하면 한 번만 경고창이 뜸. 그 이후로는 클릭해도 아무 일도 일어나지 않음.

2. 키코드 수식어 (.enter, .esc, .tab 등)

Vue.js에서는 자주 사용하는 키보드 이벤트에 대해 특정 키코드에 대응하는 수식어를 제공함. 이 수식어를 사용하면, 특정 키를 눌렀을 때만 이벤트가 발생하도록 제어할 수 있음.

대표적인 키코드 수식어:

• .enter: Enter 키
• .esc: Escape 키
• .tab: Tab 키
• .delete: Delete 키

<input @keyup.enter="submitForm" placeholder="Enter를 눌러 제출">

<script>
  new Vue({
    methods: {
      submitForm() {
        alert('Enter 키로 제출되었습니다.');
      }
    }
  }).$mount('#app');
</script>

• @keyup.enter: 사용자가 Enter 키를 눌렀을 때만 이벤트가 발생함.

커스텀 키코드 지정:

Vue에서 제공하는 기본 수식어 외에, 커스텀 키코드도 직접 지정할 수 있음.

<input @keyup.13="submitForm" placeholder="Enter 키를 눌러 제출">

• .13: Enter 키에 해당하는 ASCII 코드(13)를 수동으로 지정함.

3. 마우스 버튼 수식어 (.left, .right, .middle)

마우스 버튼 수식어는 특정 마우스 버튼이 클릭될 때만 이벤트가 실행되도록 제어함. 각 마우스 버튼에 대해 다음과 같은 수식어가 제공됨:

• .left: 왼쪽 클릭
• .right: 오른쪽 클릭
• .middle: 가운데 클릭

<div @click.right="handleRightClick">오른쪽 클릭을 해보세요</div>

<script>
  new Vue({
    methods: {
      handleRightClick() {
        alert('오른쪽 버튼이 클릭되었습니다.');
      }
    }
  }).$mount('#app');
</script>

• @click.right: 마우스 오른쪽 버튼 클릭 시에만 이벤트가 발생함.

4. .exact: 특정 조합의 키만 눌렸을 때 실행

.exact 수식어는 정확하게 특정 키 조합만 눌렸을 때만 이벤트가 발생하도록 제한함. 예를 들어, Ctrl 키만 눌렸을 때만 반응하거나, Ctrl과 Shift를 같이 눌렀을 때만 이벤트를 처리하고 싶을 때 사용함.

예시: 정확하게 Ctrl 키만 눌렸을 때 반응

<button @click.ctrl.exact="handleCtrlClick">Ctrl만 눌러 클릭</button>

<script>
  new Vue({
    methods: {
      handleCtrlClick() {
        alert('Ctrl 키만 눌러서 클릭되었습니다.');
      }
    }
  }).$mount('#app');
</script>

@click.ctrl.exact: Ctrl 키만 눌렸을 때 이벤트가 발생함. Ctrl + Shift 등 다른 키가 함께 눌리면 이벤트가 발생하지 않음.

 

다른 예시: Shift와 Ctrl을 함께 눌렀을 때만 반응

<button @click.shift.ctrl="handleClick">Shift + Ctrl 클릭</button>

• @click.shift.ctrl: Shift와 Ctrl이 함께 눌렸을 때만 이벤트가 발생함.

5. 추가적인 수식어

.prevent

• event.preventDefault()를 자동으로 호출하여 기본 동작을 막음.

.stop

• event.stopPropagation()을 호출하여 이벤트 전파를 중지함.

.self

• 이벤트가 해당 요소에서만 발생할 때 실행되도록 제한함 (자식 요소에서 발생한 이벤트는 무시).

---

요약

• .once: 이벤트가 한 번만 실행되도록 함.
• 키코드 수식어 (.enter, .esc 등): 특정 키를 눌렀을 때만 이벤트 발생.
• 마우스 버튼 수식어 (.left, .right, .middle): 특정 마우스 버튼 클릭 시에만 이벤트 발생.
• .exact: 특정 키 조합이 정확하게 입력되었을 때만 이벤트 발생.