[Vue] 이벤트 핸들링

⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

이벤트 청취

v-on디렉티브는 @기호로 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행해준다. 실행하고 싶은 자바스크립트 코드를 넣어도 되고 미리 만들어둔 메서드를 연결할 수도 있다.

인라인 핸들러

<button v-on:이벤트핸들러="자바스크립트 코드">Hello World</button>
<button @이벤트핸들러="자바스크립트 코드">Hello World</button>

메서드 핸들러

<button v-on:이벤트핸들러="메서드이름">Hello World</button>
<button @이벤트핸들러="메서드이름">Hello World</button>

 

이벤트 핸들러에 메서드 연결해주기

1. 전달해줄 인수가 없는 경우

자바스크립트에서 함수를 호출하기 위해서는 반드시 소괄호가 포함되어야했지만 Vue에서 함수를 실행할때 전달해줄 인수가 없다면 함수 이름만으로 함수를 호출할 수 있다. 인수 없이 함수만 호출해줄때 첫번째 파라미터로 event 객체를 가진다. event 객체는 사용자가 발생시킨 이벤트에 대한 정보가 나온다.

<template>
  <!-- 함수 이름만으로 함수를 호출 -->
  <button @click="handler">Click Me</button>
</template>

<script>
export default {
  methods: {
    // 첫번째 파라미터로 이벤트 객체를 가진다
    handler(event) {
      console.log(event);
      // 이벤트가 발생한 요소
      console.log(event.target);
      // 이벤트가 발생한 요소 안에 있는 텍스트
      console.log(event.target.textContent);
    },
  },
};
</script>

 

2. 전달해줄 인수가 있는 경우

함수를 실행할때 전달해줄 인수가 있다면 소괄호 안에 전달해줄 인수를 넣어준다.

 

<template>
  <!-- 함수에 전달해줄 인수가 있는 경우 -->
  <button @click="handler('Hi')">Click Me 1</button>
  <button @click="handler('Bye')">Click Me 2</button>
</template>

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

 

3. 인수와 함께 이벤트 객체도 전달해주기

전달해줄 인수가 없는 경우에는 메서드의 첫번째 파라미터로 이벤트 객체를 가졌다. 전달해줄 인수가 있는 경우에는 이벤트 객체를 $event로 직접 전달해 사용한다.

<template>
  <button @click="handler('Hi', $event)">Click Me 1</button>
  <button @click="handler('Bye', $event)">Click Me 2</button>
</template>

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

<style scoped></style>

 

4. 여러 메서드를 연결해주고 싶은 경우

하나의 이벤트 핸들러에 여러개의 메서드를 연결해주고 싶은경우 method1, method2... 이런식으로 ,로 여러 메서드를 이어 붙여준다.

<template>
  <button @click="handlerA('handlerA'), handlerB('handlerB')">Click Me</button>
</template>

<script>
export default {
  methods: {
    handlerA(msg) {
      console.log(msg);
    },
    handlerB(msg) {
      console.log(msg);
    },
  },
};
</script>

여기서 주의할점은 전달해줄 인수가 없더라도 여러개의 메서드를 하나의 이벤트 핸들러에 연결해줄 경우 함수이름 만으로 호출할 수 없다는 것이다. 여러 메서드를 전달해줄때는 반드시 소괄호()를 함수에 붙여 호출해준다.

<template>
  <!-- 여러개의 메서드를 하나의 이벤트 핸들러에 연결하는 경우 반드시 소괄호를 붙여준다 -->
  <button @click="handlerX(), handlerY()">Click Me 1</button>
</template>

<script>
export default {
  methods: {
    handlerX() {
      console.log('handlerX');
    },
    handlerY() {
      console.log('handlerY');
    },
  },
};
</script>