vue3 문법 [이벤트 핸들링]

이벤트 핸들링

이벤트 청취

v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다.
v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용합니다.

<template>
  <!-- vue.js 에서는 handler 뒤에 소괄호를 생략할 수 있다. -->
  <button @click="handler('hi',$event)">
    Click 1
  </button>
  <button @click="handler('what',$event)">
    Click 2
  </button>
</template>

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

첫 번째 버튼을 누르면 hi와 event 속성이 출력되고 

두 번째 버튼을 누르면 what이랑 event 속성이 출력된다.

<template>
  <!-- 한번에 여러개의 메소드를 동시에 연결할 때는 ()를 생략하면 안된다.-->
  <button @click="handlerA(),handlerB()">
    Click 1
  </button>
</template>

<script>
export default {
  methods : {
    handlerA() {
     console.log('A')
    },
    handlerB() {
     console.log('B')
    },
  }
}
</script>

여러가지 메소드를 연결시에는 소괄호 생략하면 제대로 동작하지 않는다.

이벤트 수식어

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

• <!-- 클릭 이벤트 전파가 중단되었습니다. -->
  <a @click.stop="doThis"></a>
  
  <!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
  <form @submit.prevent="onSubmit"></form>
  
  <!-- 수정자는 체이닝이 가능합니다. -->
  <a @click.stop.prevent="doThat"></a>
  
  <!-- 단순히 수식어만 사용이 가능합니다. -->
  <form @submit.prevent></form>
  
  <!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
  <!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
  <div @click.capture="doThis">...</div>
  
  <!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
  <!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
  <div @click.self="doThat">...</div>

<template>
  <a 
    href="https://naver.com"
    target="_blank"
    @click="handler"> 
    NAVER
  </a>
</template>

<script>
export default {
  methods : {
    handler(event) {
      event.preventDefault()  //기본동작을 방지한다.
      console.log('ABC!')
    }
  }
}
</script>
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓단순화 작업↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<template>
  <a 
    href="https://naver.com"
    target="_blank"
    @click.prevent="handler">  // event.preventDefault() 간단하게
    NAVER
  </a>
</template>

<script>
export default {
  methods : {
    handler() {  
      //기본동작을 방지한다.
      console.log('ABC!')
    }
  }
}
</script>

event.preventDefault()는 ABC! 만 동작하고 a가 가지고 있는 창이 뜨지 않는다.

 @click.once="handler">

handler 매소드를 단 한번만 실행 시켜준다.

@click.prevent.once="handler"> 체이닝 방법으로 여러개도 가능하다.

<template>
  <div
    class="parent"
    @click="handlerA">
    <div
      class="child"
      @click.stop="handlerB"></div>
      <!-- 이벤트 버블링 B를 클릭하면 B를 A가 감싸고 있어서  B와 A 둘다 클릭됨 -->
      <!-- 하지만 click.stop을 하면 B만 클릭된다. -->
  </div>
</template>

<script>
export default {
  methods:{
    handlerA() {
      console.log('A')
    },
    handlerB() {
      // event.stopPropagation() //전파되는걸 방지 이벤트 버블링
      console.log('B')
    },
  }
}
</script>

이벤트 버블링 B를 클릭하면 B를 A가 감싸고 있어서  B와 A 둘다 클릭됨 하지만 click.stop을 하면 B만 클릭된다.

<template>
  <div
    class="parent"
    @click.capture="handlerA">
    <!-- 해당하는 내용이 반대로 동작 -->
    <!-- B를 클릭하면 값이 B A 라 나와야 하는데 -->
    <!-- B를 클릭하면 값이 A B 로 출력됨 -->
    <div
      class="child"
      @click="handlerB"></div>
  </div>
</template>

<script>
export default {
  methods:{
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    },
  }
}
</script>

.capture 에 대한 실습

<template>
  <div
    class="parent"
    @click.self="handlerA">
    <!-- self라는 수식이 붙어 있는 영역을 클릭 했을때 이벤트 동작 -->
    <div
      class="child"></div>
  </div>
</template>

<script>
export default {
  methods:{
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    },
  }
}
</script>

.self

<template>
  <!-- wheel 은 마우스 wheel -->
  <!--  .passive 처리해야할 로직의 처리와 화면 스크롤을 독립시켜줄 수 있다.  -->
  <div
    class="parent" 
    @wheel.passive="handler">
    <div class="child"></div>
  </div>
</template>

<script>
export default {
  methods:{
    handler(event) {
      for (let i=0; i<1000;i+=1)
      {
        console.log(event)
      }
    }
  }
}
</script>

.passive

key 수식어

<template>
  <input 
    type="text"
    @keydown.enter="handler" />
    <!-- 키수식어로 enter,a 등 다양하게 사용 가능하다. -->
    <!-- 체이닝도 가능해서 @keydown.ctrl.a 이런식으로 사용 가능하다. -->
</template>

<script>
export default {
  methods: {
    handler() {
      // if(event.key === 'Enter') {
        console.log('Enter !!!')
      // }
    }
  }
}
</script>

키수식어로 enter,a 등 다양하게 사용 가능하다. 체이닝도 가능해서 @keydown.ctrl.a 이런식으로 사용 가능하다.