[뷰 Vue.js] 이벤트 핸들링 (Event Handling)

Listening to Events

- v-on 디렉티브를 이용하여 DOM 이벤트를 듣고 반응하여 JavaScript를 실행

<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  {{ counter }}
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0,
    }
  })
</script>

Methods Event Handlers

- 이벤트 핸들러 뒤에 JavaScript 코드들을 작성하는 것은 복잡성을 높여 좋지 않음
- method로 빼고 v-on 뒤에는 메소드의 이름만 작성함으로써 메소드를 호출할 수 있음

<div id="app">
  <button v-on:click="greet">Greeting</button>
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      name: "Vue.js"
    },
    methods: {
      greet: function(event){
        alert(`Hello ${this.name}`)
        console.log(event.target)
      }
    }
  })
</script>

Methods in Inline Handlers

- 메소드 이름을 직접 바인딩하는 대신 인라인 JS 구문에 메소드 사용 가능

<div id="app">
  <button v-on:click="say('hi')">say hi</button>
  <button @click="say('what')">say what</button>
</div>

<script>
  const app = new Vue({
    el: "#app",
    methods: {
      say: function(message) {
        alert(message)
      }
    }
  })
</script>

- 원본 DOM 이벤트에 엑세스하고 싶을 때는 $event 변수를 사용해 메소드에 전달할 수 있음

<div id="app">
  <button @click="say('hi')">say hi</button>
  <button @click="say2($event, 'hello')">say hello</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    methods: {
      say(msg) {
        alert(`Hello ${msg}`);
      },
      say2(e, msg) {
        alert(`Hello ${msg}`);
        console.log(e);
      },
    },
  });
</script>

Event Modifiers

- 이벤트를 제어하는 방법으로 Method에 직접 event.preventDefault()등을 사용할 수 있지만,
  메소드에는 데이터 처리를 위한 로직만 작업하는 것이 좋음
- 따라서, DOM의 이벤트를 처리하는 로직을 v-on에 수식어를 붙임으로써 제공하고 있음

- Event Modifier는 체이닝 형태로 사용 가능

<!-- 종속 관계에서 특정 요소만 호출하고 싶은데, 연결된 부모 요소까지 호출되는 경우가 있음(bubbling)-->
<!-- .stop 을 사용할 경우, event bubbling을 막아 원하는 event만 실행됨(클릭 이벤트 전파X) -->
<a v-on:click.stop="doThis"></a>

<!-- 태그가 가지고 있는 기본적 동작이 실행되지 않음(아래 코드에서는 제출이 되지 않음) -->
<form v-on:submit.prevent="onSubmit"></form>

 

.stop	event.stopProgagation() 호출함으로써 클릭 이벤트 전파되지 않음
.prevent	event.prevetnDeafuly() 호출함으로써, 해당 태그가 가지고 있는 브라우저 동작이 실행되지 않음
.capture	캡쳐 모드에서 이벤트 리스너를 추가함
.self	이벤트가 이 엘리먼트에서 전달된 경우에만 처리됨
.once	이벤트가 단 한 번만 동작함
.passive	DOM 이벤트를 { passive: true } 와 연결

Key Modifiers 

- 키보드에 대한 입력을 수신할 때, v-on에 대한 키 수식어를 추가할 수 있음 (엔터를 치면 submit이 되는 형태)

<div id="app">
  <!-- 키를 입력할 때마다 send 메소드가 실행됨 -->
  <input type="text" v-model="name" placeholder="이름 입력1" v-on:keyup="send" />
  <!-- enter를 누르면 send메소드가 실행됨. 13 == enter -->
  <input tpye="text" v-model="name" placeholder="이름 입력2" @keyup.13="send" />
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      name: "",
    },
    methods: {
      send() {
        alert(this.name);
      },
    },
  });
</script>