이벤트 핸들링

v-on 디렉티브는 단축 문법으로 @ 기호를 사용
DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행

인라인 핸들링 : 권장하지 않음
<button @click="count++">1 추가</button>

메서드 핸들링: 권장함

const name = ref('Vue.js')

function greet(event) {
  alert(`안녕 ${name.value}!`)
  // 'event'는 네이티브 DOM 이벤트 객체입니다.
  if (event) {
    alert(event.target.tagName)
  }
}

다만 handler 같이 ()가 붙지 않은것은 매개변수가 필요 없던것임
매개변수가 필요하면 ()를 붙여야함

매개변수와 이벤트 정보를 같이 사용하려면 $event 매개변수를 붙여야함

<template>

  <button @click="handler('hi', $event)">
    CLick 1!
  </button>
  
  <button @click="handler('what', $event)">
    CLick 2!
  </button>
  
  <button @click="handlerA(), handlerB()"> 
  //이벤트를 여러개 사용하려면 꼭 메서드 뒤에 ()를 붙여야함
    CLick AB!
  </button>
  
</template>

<script>
export default{
  //메서드 핸들링방식
  methods: {
   handler(msg, event) { //매개변수, 이벤트정보 같이 받음
      console.log(msg)
      console.log(event)
    },
    handlerA(msg, event) {
      console.log('A')
    },
    handlerB(msg, event) {
      console.log('B')
    }
  }
}
</script>

이벤트 수식어

html 기본동작 실행 안하기

event.preventDefault(), @click.prevent

ex)

<div 
     hmtl기능 ex) 새창열기
     @click.prevent="handler()">
    CLick!
</div>

method: {
	handler(event){
		console.log(event.preventDefault())
	}
}

위 상황에서 div 기능인 새창열기를 실행하지 않는다.

이벤트 한번만 실행하기

@click.once

메소드 체이닝 가능

ex) @click.prevent.once

이벤트 버블링: 이벤트가 타고타고 올라감

<div class = parent, @click = HandlerA>
	
    <div class = child, @click = HandlerB>
    	코드
    <div>
</div>

위 같이 parent, child가 있을때 HandlerB실행시
child이벤트 -> parent이벤트로 실행이 되는 현상(HandlerA, B 둘다 실행)

event.stopPropagation, @click.stop 로 해결

캡쳐링:버블링 반대, 이벤트가 타고타고 내려감

parent이벤트 -> child이벤트로 실행이 되는 현상

@click.capture -> 버블링을 반대로 만듬 : 캡쳐링

---

parent, child 가 있을때 parent 안에 child를 클릭해도 parent쪽 이벤트 동작 X
@click.self : 자신의 영역만 지정

console.log 출력시 event.target, event.currenttarget이 같을때만 작동

---

휠 작동시 부하가 심하게 걸릴때 휠 동작이랑 그 외 작업이랑 분리
->휠 동작이 부드러워짐
@wheel.passive

키 수식어

키보드 입력을 받아 사용

템플릭쪽@KeyDown + 스크립트쪽event.Key === 'Enter'
= @KeyDown.enter (키보드 입력 kebob표기법으로 표시해야함)

메소드 체이닝 가능

@KeyDown.ctrl.shift.a