[Vue] 이벤트 처리

1. 이벤트 개요

• Vue에서는 `v-on` 디렉티브 또는 `@` 축약형을 사용해 DOM 이벤트에 반응합니다.

<!-- 기본 형식 -->
<button v-on:click="method">Click</button>
<!-- 축약형 -->
<button @click="method">Click</button>

• 이벤트 이름은 표준 DOM 이벤트와 동일
• 연결된 메서드는 methods 영역에 정의

---

2. 인라인 이벤트 처리

• 인라인으로 간단한 표현식을 사용
• 간단한 계산이나 단일 동작일 때 유용
• 복잡한 로직은 methods에 위임

<button @click="count++">+1</button>
<input @keyup.enter="submit">

---

3. 이벤트 핸들러 메서드

• 이벤트와 로직을 분리해 코드의 재사용성과 가독성 확보
• 복잡한 동작은 methods 옵션에 정의하고 연결
• `this`는 해당 Vue 인스턴스를 참조

methods: {
  increment() {
    this.count++;
  },
  submit() {
    alert("입력 완료!");
  }
}

---

4. 이벤트 객체 

• 이벤트 핸들러에서 `$event`를 명시해 이벤트 객체를 전달받을 수 있음

<input @keyup.enter="handleKeyPress">

methods: {
  handleKeyPress(e) {
    console.log(e.target.value);
  }
}

 

✅ 주요 공통 속성

속성	설명
`target`	이벤트 발생 대상
`currentTarget`	이벤트 리스너가 연결된 대상
`path`	이발트 발생 HTML 요소부터  Window 객체까지 거슬러가는 경로
`bubbles`	버블링 여부
`cancelable`	기본 이벤트 실행 취소 여부
`defaultPrevented`	기본 이벤트 실행 금지 여부
`eventPhase`	이벤트 전파 단계

 

✅ 키코드 이벤트 속성

속성	설명
`altKey`	ALT 키가 눌렸는지 여부
`shiftKey`	SHIFT 키가 눌렸는지 여부
`ctrlKey`	CTRL 키가 눌렸는지 여부
`metaKey`	메타키(Window Key, Command Key)가 눌렸는지 여부
`key`	이벤트에 의해 나타나는 키의 값(대소문자 구분)
`code`	이벤트를 발생시킨 키의 코드 값
`keyCode`	이벤트를 발생시킨 키보드의 고유 키코드 ex)a,  A는 65
`charCode`	keypress 이벤트가 발생될 때 Unicode

 

✅ 마우스 이벤트 속성

속성	설명
`altKey`, `shiftKey`, `ctrlKey`, `metaKey`	키보드 이벤트 속성과 동일
`button`	이벤트 발생시킨 마우스 버튼(0: 왼쪽, 1: 휠, 2: 오른쪽)
`buttons`	마우스 이벤트가 발생한 후 눌러져 있는 마우스 버튼의 값 1: 마우스 왼쪽 버튼, 2: 마우스 오른쪽 버튼. 4: 마우스 휠
`clientX`, `clientY`	뷰포트(ViewPort) 영역상에서 좌표. 스크롤되도 좌표 영향 X
`layerX', `layerY'	HTML 요소 영역상에서의 좌표(IE 이외의 브라우저)
`offsetX', `offsetY`	HTML 요소 영역상에서의 좌표(IE 브라우저)
`pageX`, `pageY`	HTML 문서(Document) 영역상에서의 좌표
`screenX`, `screenY`	모니터 화면(Screen) 영역상의 좌표

 

✅ 이벤트 객체 주요 메서드

• `preventDefault()`: 기본 동작 차단
• `stopPropagation()`: 이벤트 전파 중단

---

5. 기본 이벤트

• 기본 동작이 포함된 태그 사용 시 반드시 이벤트를 차단
• `.prevent`event.preventDefault()` 직접 호출로 처리

<a href="#" @click.prevent="goBack">뒤로가기</a>
<form @submit.prevent="handleSubmit">...</form>

---

6. 이벤트 전파와 버블링

• Vue의 이벤트는 기본적으로 버블링(Bubbling) 방식으로 전파

✅ 전파 방식

• Bubbling: 자식 → 부모 (기본 동작)
• Capturing: 부모 → 자식 (명시적 설정 필요)

<div @click="parent">
  <button @click="child">Click</button>
</div>

methods: {
  parent(e) { console.log("부모"); },
  child(e) { console.log("자식"); }
}

✅  관련 속성 비교

속성	설명
`target`	최초 이벤트 발생 요소 (변하지 않음)
`currentTarget`	현재 이벤트가 도달한 요소 (전파 중 계속 변함)

 

✅ 전파 제어 메서드

• `event.stopPropagation()` 또는 `. stop`.stop` 수식어 사용

<button @click.stop="child">Click</button>

 

✅ 관련 수식어

• `.stop`:
• `.capture`:
• `.self`: RASING_PHASE 단계일 때만 이벤트 발생

---

7. 이벤트 수식어

• Vue는 다양한 수식어를 제공해 이벤트를 간편하게 제어 가능

7.1 `.once` 수식어

• 이벤트를 한 번만 실행하도록 제한

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

 

7.2 키코드 관련 수식어

<input @keyup.enter="submit"> // 엔터를 쳤을 때 이벤트 핸들러 호출
<input @keyup.ctrl.enter="submit"> //  CTRL+ENTER 조합 시 이벤트 핸들러 호출
<input @keyup.ctrl.c="copy"> //CTRL+C조합 시 이벤트 핸들러 호출

키 수식어	설명
`enter`, `esc`, `space`, `tab`, `delete`	특수키 대응
`up`, `down`, `left`, `right`	방향키 대응
`ctrl`, `alt`, `shift`, `meta`	조합 키 대응

 

7.3 마우스 관련 수식어

<button @click.left="leftClick">좌클릭</button>
<button @click.right="rightClick">우클릭</button>

수식어	설명
`left`	마우스 왼쪽 버튼
`right`	마우스 오른쪽 버튼
`middle`	마우스 가운데 버튼

 

7.4 `.exact`.exact` 수식어

• 정확한 키 조합일 때만 이벤트를 실행

<button
  @click.exact="num += 1"
  @click.ctrl.exact="num += 10"
  @click.ctrl.alt.exact="num += 100">
  클릭
</button>

• `.exact`가ctrl`만 눌러도 실행됨
• `.exact`가

---

📎 참고자료

• Vue 공식 가이드 - 이벤트 핸들링
• Vue API - 이벤트 수식어
• MDN - JavaScript Event 객체
• 원쌤의 Vue.js 퀵스타트 (원형섭 저)