[Vue] 이벤트 핸들링

ina·2023년 3월 15일
0

메서드 이벤트 핸들러

<body>
    <div id="app">
      <ul>
        <li
          :class="'item - '  + (index + 1)"
          v-for="(todo,index) in todos"
          :key="index"
          @click="clickMethod1(todo.title, $event); clickMethod2()"
        >
          {{ todo.title }}
        </li>
      </ul>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          todos: [
            { title: '아침 먹기' },
            { title: '점심 먹기' },
            { title: '저녁 먹기' }
          ]
        },
        methods: {
          clickMethod1(title, event) {
            console.log('click1')
            console.log(title)
            console.log(event.currentTarget.className)
          },
          clickMethod2(title, event) {
            console.log('click2')
          }
        }
      })
    </script>
  </body>

inline method handler

li요소를 클릭하면 console에 요소의 className이 찍히도록 동작 clickMethod1(title, event) { console.log(event.currentTarget.className)} :class="'item - ' + (index + 1)"

인라인 + 이벤트

인라인 이벤트 핸들러(인수사용)에 이벤트 핸들러를 함께 사용하는 방법

<button @click="clickMethod1(todo.title, $event)">
  click!
</button>

Multiple event handlers

다중 메서드 핸들러를 사용할때는 인수가 없어도 ()소괄호를 명시해야한다

<button @click="clickMethod1(todo.title, $event); clickMethod2()">
  click!
</button>

이벤트 수식어(Event Modifiers)

handler(e) {
  e.preventDefault()
} 
// HTML의 기본 동작을 방지하고 method만 실행하는 기능
handlerB(e) {
  e.stopPropagation()
}
// 버블링을 방지하는 기능

이벤트 핸들러 내부에 event.preventDefault() 또는 event.stopPropagation()을 호출하여 DOM 이벤트 세부 사항을 처리하는 대신,
데이터 로직에 대한 메소드만 사용할 수 있도록 Vue는 v-on 이벤트에 이벤트 수식어를 제공한다.
수식어는 점으로 표시된 접미사이다.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다(target과 currentTarget이 동일) -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>

키 수식어

<!-- `key`가 `Enter`일 때 vm.submit()을 호출하겠다 -->
<input v-on:keyup.enter="submit">

키보드 이벤트를 수신할 때 Vue는 v-on에 대한 키 수식어를 추가할 수 있다

<body>
    <div id="app">
      <input type="text" @keydown.ctrl.enter="keydownHandler" />
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
          keydownHandler(e) {
            console.log('Done!!')
          }
        }
      })
    </script>
  </body>
  • .enter
  • .tab
  • .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

시스템 키 수식어 목록

해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다

  • .ctrl
  • .alt
  • .shift
  • .meta
profile
🐢 💨 💨

0개의 댓글