한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

이벤트 핸들링

vue.js가이드 문서에서 더 자세한 내용을 확인할 수 있습니다

1. 이벤트 청취

v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="" 나 줄여서 @click=""으로 사용합니다.

<div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

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

버튼을 클릭할 때마다 counter라는 데이터가 1씩 증가할 수 있는 구조입니다.

2. 메소드 이벤트 핸들러

많은 이벤트 핸들러의 로직은 더 복잡할 것이므로, JavaScript를 v-on 속성 값으로 보관하는 것은 간단하지 않습니다. 그게 v-on이 호출하고자 하는 메소드의 이름을 받는 이유입니다.

<input v-model="title" @keydown.enter="searchMovies(true)" />

  methods: {
    async searchMovies(isFirst) {
      if (isFirst) {
        this.movies = []
        this.page = 1
      }
      let res = await fetch(`https://www.omdbapi.com?apikey=7035c60c&s=${this.title}&page=${this.page}`)
      res = await res.json()
      console.log(res)
      const { Search, totalResults } = res
      this.movies.push(...Search)
      this.page += 1
      this.total = parseInt(totalResults)
      this.showObserver = false
      setTimeout(() => {
        this.showObserver = true
      })
      // this.$nextTick(() => {
      //   this.showObserver = true
      // })
    }
  }

<div id="event-with-method">
  <button @click="greet">Greet</button>
</div>

Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다.
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')

method옵션에 greet함수를 만들어 그 안에 복잡한 내용을 명시하고 클릭을 했을 때 실행할 이벤트 핸들러로써 메소드의 이름을 작성해주면 됩니다. 이벤트 핸들러라는 것은 클릭이라는 이벤트가 발생했을 때 실행할 함수라는 의미를 가지고 있습니다. 따라서 되도록이면 click이라는 이벤트의 값으로 실제 로직을 적기보다는 메소드라는 옵션 부분에 명시해놓은 이름을 가지고 있는 메소드를 직접적으로 연결을 해 주는 것이 좋습니다.

3. 이벤트 객체

<template>
  <button @click="handler">
    Click me!
  </button>
</template>

<script>
export default {
  methods: {
    handler(e) {
      console.log(e)
    }
  }
}
</script>

버튼을 클릭해 콘솔창을 확인하면 이벤트 객체를 확인할 수 있습니다. 여기서 말하는 이벤트객체라는 것은 클릭이라는 이벤트가 발생했을 때 하나의 정보를 가지고 있는 객체데이터를 의미합니다. 클릭을 했을 때 발생할 수 있는 여러가지 클릭과 관련된 이벤트 객체 정보들이 들어있기 때문에 필요에 따라서 해당하는 내용들을 언제든지 활용해 쓸 수 있습니다.

console.log(e.target)
console.log(e.target.textContent)

인수가 없을 때 소괄호를 생략하는 방법은 자바스크립트가 아닌 vue.js의 문법입니다.

또한 따로 인수를 넣지 않으면 이벤트 객체가 들어오지만, 아래와 같이 따로 인수를 넣어주는 경우 해당 인수가 첫번째 매개변수로 받아져서 활용이 될 수 있는 구조를 가지는 것을 확인할 수 있습니다.

<template>
  <button @click="handler('hi')">
    Click1
  </button>
  <button @click="handler('what')">
    Click2
  </button>
</template>

<script>
export default {
  methods: {
    handler(msg) {
      console.log(msg)
    }
  }
}
</script>

만약, 인수도 사용을 하고 이벤트 객체도 필요로 한다면 vue.js에서는 아래와 같이 사용을 할 수 있습니다.

<template>
  <button @click="handler('hi', $event)">
    Click1
  </button>
  <button @click="handler('what', $event)">
    Click2
  </button>
</template>

<script>
export default {
  methods: {
    handler(msg, event) {
      console.log(msg)
      console.log(event)
    }
  }
}
</script>

4. 복합 이벤트 핸들러

이벤트 핸들러 안에서 복합 메소드를 지정할 수도 있습니다. 이러한 방식을 통해 하나의 이벤트에 여러 개의 메소드를 동시에 연결하여 사용할 수 있습니다.

,로 구분해줍니다(vue2버전에서는 ;로구분)

단 주의해야하는 부분은 따로 인수로 들어가는 내용이 없더라도 소괄호를 작성을 해주어야합니다.

<template>
  <button @click="handlerA(), handlerB()">
    Click1
  </button>
</template>

<script>
export default {
  methods: {
    handlerA(){
      console.log('A')
    },
    handlerB(){
      console.log('B')
    }
  }
}
</script>