KB IT's Your Life/Vue

Vue [05] 이벤트 처리

지식보부상님 2025. 3. 26. 17:20

[1] 인라인 이벤트 처리

◈ 인라인 이벤트

- v-on 디렉티브로 설정 가능 

- @[이벤트 이름] = "표현식" 또는 v-on:[이벤트이름]="표현식"

더보기 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      금액: <input type="text" v-model.number="amount" />
      <br />
      <button v-on:click="balance += parseInt(amount)">입금</button>
      <br />
      <button @click="balance -= parseInt(amount)">출금</button>
      <br />
      <h3>계좌 잔고: {{balance}}</h3>
    </div>

    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      let vm = Vue.createApp({
        name: 'App',
        data() {
          return {
            balance: 0,
            amount: 0,
          };
        },
      }).mount('#app');
    </script>
  </body>
</html>

[2] 이벤트 핸들러 메서드

◈ 이벤트 핸들러 메서드

- Vue 인스턴스의 methods 속성에 정의한 함수를 이벤트 처리 함수로 연결

 

[3] 이벤트 객체

◈  주요 공통 속성

속성명 설명
target 이벤트 발생한 HTML 요소
currentTarget 이벤트 리스너가 이벤트 발생시키는 HTML 요소
path 배열값, 이벤트 발생 HTML 요소부터 document, window 객체까지 거슬러 올라가는 경로
bubbles 현재 이벤트가 버블링 일으키는 이벤트인지 여부
cancelable 기본 이벤트 실행 취소 가능한지 여부
defaultPrevented 기본 이벤트 실행 금지되어있는지 여부
eventPhase 이벤트 흐름의 단계
1: 포착 CAPTURE_PHASE
2: 이벤트 발생 AT_TARGET
3: 버블링 BUBBLING_PHASE
srcElement IE에서 사용되던 속성, target과 동일한 속성

 

◈  키 코드 이벤트 관련 속성

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

 

◈  마우스 이벤트 관련 속성

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

 

◈ 이벤트 객체의 주요 메서드

속성명 설명
preventDefault() 기본 이벤트 자동 실행 금지
stopPropagation() 이벤트 전파 중단

 

[4] 기본 이벤트

◈ 기본 이벤트 (Default Event) 

- HTML 문서(요소)에 기능 실행하도록 이미 정의된 이벤트

ex) <a>: 클릭시 href 경로 페이지로 이동

- @이벤트.prevent: 해당 이벤트 차단

 

[5] 이벤트 전파와 버블링

◈ 이벤트 전파의 3단계

- 포착(Capturing): 부모->자식 순으로 이벤트 전파

- 버블링(Bubbling): 자식->부모 순으로 이벤트 전파 , default

 

◈ 버블링 차단

- event.stopPropagation() : 버블링을 차단

- .stop : 이벤트 전파 중단, .stopPropagation()과 동일한 효과

- .capture : CATURING_PHASE 단계에서만 이벤트 발생

- .self : RASING_PHASE 단계일 때만 이벤트 발생

 

[6] 이벤트 수식어

◈ once 수식어

- 한번만 이벤트 발생 후 이벤트 연결 해제 

- 모든 이벤트에 연결 가능함

 

◈ 키코드 관련 이벤트 수식어

- 키 관련 수식어: up, down, left, right, enter, esc, space, tab, delete, ctrl, alt, shift, meta

- @이벤트.enter = "..." : 엔터 쳤을 때 이벤트 핸들러 호출 (자주 사용)

- @keyup.ctrl.enter="..." : ctrl+enter 조합시 이벤트 핸들러 호출

- @keyup.ctrl.c = "..." : ctrl+c 조합시 이벤트 핸들러 호출

 

◈ 마우스 관련 수식어

- left, right, middle: 마우스 버튼 (좌, 우, 휠)

- 키 관련 수식어도 사용 가능

 

◈ exact 수식어

- 다른 수식어와 조합해 이벤트 등록할 때 정확하게 일치하는 조합으로 이벤트 일어나야 핸들러 실행

- ex) @click.ctrl.alt.exact="..." : ctrl+alt+click 만 눌렸을 때 이벤트 핸들러 호출됨