이벤트 핸들링 - Vue.js

v-on 디렉티브를 사용하여 이벤트 리스닝

v-on:[이벤트 이름]="표현식"
@[이벤트이름]="표현식"  // 단축 표현

 

핸들러 값은 다음 중 하나

• 인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 JavaScript
• 메서드 핸들러 : 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로

 

---

인라인 핸들러

• 간단한 경우 사용

<div id="app">
    <!-- 인라인의 this도 Vue의 인스턴스 -->
  <input type="text" :value="name" **@input="(e)=>this.name=e.target.value"** />
  <br />
  이름: <span>{{name}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  let vm = Vue.createApp({
      name: "App",
      data() {
          return {
                  name: "",
          };
      },
  }).mount("#app");
</script>

 

인라인 핸들러에서 메서드 호출

• 네이티브 이벤트 객체 대신 사용자 지정 인자를 메서드에 전달할 때 사용

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('안녕')">안녕이라고 말하기</button>
<button @click="say('잘가')">잘가라고 말하기</button>

 

인라인 핸들러에서 이벤트 객체 접근

• $event 특수 키워드 사용 or 인라인 화살표 함수 사용

methods: {
  warn(message, event) {
    // 네이티브 이벤트 객체에 접근 가능
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
  제출하기
</button>
 
<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
  제출하기
</button>

---

메서드 핸들러

• 복잡한 경우
• 메서드 핸들러는 이를 트리거하는 네이티브 DOM 이벤트 객체를 자동으로 수신

 

메서드 vs 인라인

• foo, foo.bar, foo[’bar’] → 메서드 핸들러 처리
• foo(), count++ → 인라인 핸들러 처리

• 이벤트 객체만 넘길 때 @click="함수명"
• 이벤트 객체가 아닌 자신의 데이터를 넘기고자 할 때 @click=”함수명(인자)”
• 이벤트 객체와 자신의 데이터를 넘기고자 할 때 @click="함수명($event, 인자)"

---

이벤트 수식어

• 이벤트 핸들러 내에서 event.preventDefault() 또는 event.stopPropagation() 을 호출하는 메서드 대신
• 메서드가 DOM 이벤트에 대한 세부적인 처리 로직 없이 데이터 처리 로직만 있도록 수식어 사용
• 수식어끼리 연결 가능
• 이벤트에 핸들러 없이 수식어만 사용 가능

수식어	설명
.stop	이벤트 전파 중단, event.stopPropagation() 호출과 동일
.capture	CAPTURING_PHASE 단계에서만 이벤트 발생
.self	RASING_PHASE 단계일 때만 이벤트 발생, target이 자신일 경우
.prevent	event.preventDefault() 호출과 동일
.once	이벤트가 단 한 번만 실행됨
.passive	핸들러 내 event.preventDefault() 가 포함되었더라도 기본 동작 발생, .prevent와 함께 사용하면 안 됨

⭐ 수식어를 연결할 때는 순서가 중요함,

• @click.prevent.self : 앨리먼트 자체와 그 자식에 대한 클릭 기본 동작 방지
• @click.self.prevent : 앨리먼트 자체에 대한 클릭의 기본 동작만 방지

---

입력 키 수식어

• 입력 키 별칭
  • .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
• 시스템 입력 키 수식어
  • .ctrl, .alt, .shift, .meta
• 마우스 버튼 수식어
  • .left, .right, .middle

@keyup.ctrl.enter="..." (CTRL+ENTER 조합 시 이벤트 핸들러 호출) 처럼 연결 가능

 

exact 수식어

• 다른 수식어와 조합해 이벤트를 등록할 때
• 정확하게 일치하는 조합으로 이벤트가 일어나야 핸들러가 실행되도록 설정
  •  exact 를 사용하지 않을 때는 여러 조합에서 포함만 되어 있으면 동작함

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