이벤트 핸들링

이재웅

• v-on 디렉티브는 Event Handler 대신 expression도 사용이 가능하다.(권장하지는 않음)

• Event Handler의 참조를 넘기는 대신 inline으로 직접 실행도 가능하며, 이 경우 event argument 는 자동으로 전달되지 않고 parameter에 $event로 직접 전달해야 한다.

• ,(Comma)를 이용해서 여러 이벤트를 실행할 수 있다.

• ViewModel 이 파기되면 등록되어있던 모든 Event Listener가 자동으로 제거된다.

장규범

팽건우 두둥등장

이벤트 핸들링

HTML로 된 리스너 사용이유

1. HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽다.

2. JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없어 ViewModel 코드는 순수 로직과 DOM이 필요하지 않아 테스트가 쉬워진다.

3. ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거됩니다. 걱정 ㄴㄴ

• ViewModel: 모델과 뷰 사이의 인터페이스

이벤트 청취

<div id="basic-event">
  <button @click="cnt += 1">Add 1</button>
</div>

Vue.createApp({
  data() {
    return {
      cnt: 1
    }
  }
}).mount('#basic-event')

메소드 이벤트 핸들러

<div id="event-method">  <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 -->  <button @click="clickEvent">Greet</button>  </div>

Vue.createApp({
  data() {
    return {
      name: 'hello'
    }
  },
  methods: {
    clickEvent(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다.
      alert('Hello ' + this.name + '!')
    }
  }
}).mount('#event-method')

인라인 메소드 핸들러

<div id="handler">
  <button @click="say('hi', $event)">Say hi</button>
</div>

Vue.createApp({
  methods: {
    say(message, event) {
      alert(message)
      if (event) {
	      event.preventDefault();
      }
    }
  }
}).mount('#handler')

이벤트 수식어

<!-- 클릭 이벤트 전파가 중단되었습니다. -->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

키 , 시스템, 마우스 버튼 수식어

<input @keyup.enter="submit"/>

//키 수식어
-   `.enter`
-   `.tab`
-   `.delete`  (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
-   `.esc`
-   `.space`
-   `.up`
-   `.down`
-   `.left`
-   `.right`

//시스템 수식어
-   `.ctrl`
-   `.alt`
-   `.shift`
-   `.meta`

//마우스 버튼 수식어
-   `.left`
-   `.right`
-   `.middle`

홍정기

<button @click="counter += 1">Add 1</button>

// 메소드 직접 바인딩
<button @click="say">say hi</button>

// 인라인 자바스크립트 구문에 메소드 사용
<button @click="say('what')">say what</button>

// 두 개가 무슨 차이지?
// 동작은 같은데 그냥 방식이 다르다는건가

// 복합 이벤트 핸들러
// 무조건 인라인 방식으로 사용해야 하는 듯?
<button @click="one($event), two($event)">submit</button>