[Vue #6] 이벤트 핸들링

기본 사용법

<div id="app">
  <h1 @click="say('Hello~',$event)">{{msg}}</h1>
</div>

const App = {
  data() {
    return {
      msg: "Vue",
    };
  },
  methods: {
    say(message, event) {
      console.log(event);
    },
  },
};
const vm = Vue.createApp(App).mount("#app");

v-on을 이용해 이벤트를 바인딩한다.
보통, 이벤트를 선언하는 부분에서 호출한 곳의 이벤트를 조작하여 핸들러를 구현하는데 호출한 곳에서 인자로 $event로 넣어주면 된다.

복합 이벤트 핸들러

<div id="app">
  <h1 @click="a(), b(), c()">Hello Vue!</h1>
</div>

const App = {
  methods: {
    a() {
      console.log("A");
    },
    b() {
      console.log("B");
    },
    c() {
      console.log("C");
    },
  },
};
const vm = Vue.createApp(App).mount("#app");

하나의 이벤트에 여러개 핸들러 함수를 등록할 수 있다. 핸들러 함수는 ,이나 ;으로 구분하면 된다.

순서는 호출시에 명시한 순서대로 작동한다.

이벤트 수식어

<!-- e.preventDefault() -->
<div id="app">
  <a href="https://google.com" target="_blank" @click.prevent>Google</a>
</div>

<!-- e.stopPropagation() -->
<div id="app">
  <div class="parent"
       @click="log">
    <div class="child"
         @click.stop="log"> <!-- .capture로 캡처링도 가능 -->
    </div>
</div>

<!-- currentTarget과 target이 같은 요소를 가리킬 때만 동작 -->
<div id="app">
  <div class="parent"
       @click.self="log">
    <div class="child"</div>
</div>
  
<!--  로직에 많은 연산이 들어가게 되면 렌더링과 로직이 동시에 동작할 때, 화면의 버벅임이 있는데 이를 `passive`를 이용해분리할 수 있다. -->

<div class="parent"
     @wheel.passive="log">
  </div>

이벤트를 통해 조작하는 함수를 핸들러 안에서 데이터를 다루는 로직과 분리하기 위해 태그에서 명시할 수 있도록 하는 기능을 제공한다.

키 수식어

키 이벤트 사용시 간편하게 키 이름을 수식어로 연결하여 사용이 가능하다.

<div id="app">
  <input type="text" @keyup.arrow-down="log" />
</div>

keyup 이벤트는 키보드를 입력하고 뗄 때 반응하는 이벤트다.

키 핸들러에 체이닝 형식으로 arrow-down을 연결하여 아래 화살표를 눌렀을 때만 log핸들러가 호출된다.

<div id="app">
  <input type="text" @keyup.alt.arrow-down="log" />
</div>

체이닝 형식으으로 alt와 화살표 아래를 동시에 눌렀을때만 핸들러가 호출된다.

<div id="app">
  <input type="text" @keyup.arrow-down.exact="log" />
</div>

명시되어져 있는 이벤트만 감지하여 핸들러를 호출하려면 exact를 사용하면 된다.

다른 이벤트와 섞어서 화살표 아래를 누르는 경우는 핸들러가 호출 되지 않는다.