Vue 3.0 - Event 전달

자바스크립트에서 이벤트란?

이벤트(Event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 "클릭을 했을 때", "스크롤을 했을 때", "무언가 입력했을 때" 등의 상호작용으로 인해 일어나는 사건을 의미하는데, DOM 요소와 관련이 있습니다.

이 이벤트라는게 존재하는 이유는 어떠한 이벤트가 발생했을 때 그에 맞는 반응을 해주기 위해서겠죠~! 따라서 이벤트는 일반적으로 함수에 연결되며, 이 함수를 이벤트 핸들러(Event Handler) 라고 합니다.

<!-- 바로 태그에 코드를 쓰는 방식 -->
<input type="button" onclick="alert('Hello world');" value="button" />
<!-- 실행>> Hello world -->

<!-- this를 통해 자기 자신을 참조하는 방식 -->
<input type="button" onclick="alert('Hello world ' + this.value);" value="샘플" />
<!-- 실행>> Hello world 샘플 -->

<!-- Script 태그에서 함수를 선언하고, 태그에 지정하는 방식 -->
<button onclick="myHandler1(); myHandler2();">Click me</button>
<script>
    function myHandler1() {
      alert('myHandler1');
    }
    function myHandler2() {
      alert('myHandler2');
    }
</script>

Vue 에서의 event 전달

  <template>
    <div>
      <!-- @keyup에 event 보내서 enter 키 확인 -->
      <input type="search" @keyup="checkEnter($event)" v-model="searchText">
      <button @click="doSearch">조회</button>
      <!-- @keyup.enter로 엔터 바로 확인 -->
      <!-- .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl.enter(컨트롤+엔터) 등 다양함 -->
      <input type="search" @keyup.enter="doSearch" v-model="searchText">
      <button @click="doSearch">조회</button>
      <!-- .stop - event.stopPropagation -->
      <!-- .prevent - event.preventDefault() -->
      <button type="submit" @click.prevent="doSearch">제출</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchText: ''
      }
    },
    methods: {
      doSearch() {
        console.log(this.searchText)
      },
      checkEnter(evt) {
        console.log(evt.key)
        // key가 enter면 doSearch 실행
        if (evt.key === 'Enter') {
          // method도 this 사용
          this.doSearch()
        }
      }
    }
  }
  </script>
  
  <style>
  
  </style>

https://jhyonhyon.tistory.com/23