이벤트 핸들링 - 이벤트 수식어

공식 참고 문서

https://v3.ko.vuejs.org/guide/events.html#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%8E%E1%85%A5%E1%86%BC%E1%84%8E%E1%85%B1

이벤트 핸들링 | Vue.js

 

Html 의 기본 기능을 사용하지 않도록 하는 명령어

• method에서 사용하는 명령어: event.preventDefault();
• Html에서 지정하는 명령어: @click.prevent="handler"

특정 핸들러를 단 한번만 사용하게 설정하는 방법

• @click.once="handler"

기능을 연결하는 방법, 예를 들어 위2가지 기능을 함께 사용할 수 있다.

• @click.prevent.once="handler"

예제 코드 App.vue

<template>
  <a
    href="http://naver.com"
    target="_blank"
    @click.prevent="handler"> Html 기본기능 막기 </a>
  
  <br />
  <br />

  <a
    href="http://naver.com"
    target="_blank"
    @click.once="handler"> 한번만 핸들러 기능 사용 </a>
  <br />
  <br />
  <a
    href="http://naver.com"
    target="_blank"
    @click.prevent.once="handler"> 기본기능 막고 이벤트 한번만 작동 </a>
</template>

<script>
export default {
  methods: {
    handler() {
      // Html에 기능을 사용하지 않도록 하는 이벤트
      // event.preventDefault();
      console.log('ABC!');
    }
  }
}
</script>

 

브라우저 확인

첫번째 예제 (naver로 이동되는것을 막는다.)

 

두번째 예제 (이벤트가 한번만 작동한다.( log 이벤트 확인))

 

세번째 예제(위의 2가지 기능을 합쳐서 확인)

 

 

 

이벤트 버블링 예제

테스트를 진행할 코드

<template>
  <!-- 휠 이벤트 예제 -->
  <!-- <div
    class="parent"
    @wheel="handlerA"> -->
  <!-- 클릭 이벤트 예제 -->
  <!-- <div
    class="parent"
    @click.capture="handlerA"> -->
  <div
    class="parent"
    @click="handlerA">
    <!-- <div
      class="child"
      @click.stop="handlerB">
    </div> -->
    <div
      class="child"
      @click.stop="handlerB">
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handler() {
      // Html에 기능을 사용하지 않도록 하는 이벤트
      // event.preventDefault();
      console.log('ABC!');
    },
    handlerA(evnet){
      // target: 현재 클릭된 영역
      console.log(evnet.target);
      // currentTarget: 현재 이벤트가 연결된 영역
      console.log(evnet.currentTarget);
      console.log('A');
    },
    handlerB(event){
      // 이벤트 버블링을 방지하는 명령어
      // event.stopPropagation();
      console.log('B');
    },
    handlerC(event){
        for (let i = 0; i < 10000; i += 1) {
          console.log(event);
        }
    }
  }
}
</script>

<style scoped lang="scss">
  .parent{
    width: 200px;
    height: 100px;
    background-color: royalblue;
    margin: 10px;
    padding: 10px;
    overflow: auto;
    .child{
      width: 100px;
      height: 2000px;
      background-color: orange;
    }
  }
</style>

일반적으로 자식요소를 클릭하면 부모요소도 함께 이벤트가 발생한다.

그것을 방지하기 위해서 아래와 같은 명령어를 선언할 수 있다.

• 메소드에 정의하는 방법: event.stopPropagation();
• 클릭 이벤트에 정의하는 방법: @click.stop="handlerB"

브라우저 확인

 

보통 클릭된 자식요소의 이벤트가 먼저 작동하지만 이벤트 메소드를 이용하여 선언한 메소드가 먼저 작동하도록 할 수 있다.

명령어: @click.capture="handlerA"

브라우저 확인

 

위의 두 기능을 모두 선언하는 방법

명령어: @click.stop.capture="handlerA"

브라우저 확인

 

자식요소를 클릭해도 부모요소의 이벤트가 동작하지 못하도록 하는 방법

명령어: @click.self="handlerA"

타겟영역과 이벤트에 동작하는 영역이 같을 경우 작동

      // target: 현재 클릭된 영역

      console.log(evnet.target);

      // currentTarget: 현재 이벤트가 연결된 영역

      console.log(evnet.currentTarget);

브라우저 확인

 

 

마우스의 휠 기능을 이용할때 동작하는 이벤트 명령어

명령어: @wheel="handlerA"

예제 코드

<template>
  <div
    class="parent"
    @wheel="handlerA">
    <!-- <div
      class="child"
      @click.stop="handlerB">
    </div> -->
    <div
      class="child">
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handler() {
      // Html에 기능을 사용하지 않도록 하는 이벤트
      // event.preventDefault();
      console.log('ABC!');
    },
    handlerA(evnet){
      // target: 현재 클릭된 영역
      console.log(evnet.target);
      // currentTarget: 현재 이벤트가 연결된 영역
      console.log(evnet.currentTarget);
      console.log('A');
    },
    handlerB(event){
      // 이벤트 버블링을 방지하는 명령어
      // event.stopPropagation();
      console.log('B');
    },
    handlerC(event){
        for (let i = 0; i < 10000; i += 1) {
          console.log(event);
        }
    }
  }
}
</script>

 

브라우저 확인

 

스크롤과 로직 처리를 분리하여 사용하는 방법(로직처리가 부하가 많이 될 경우 끊기는 현상이 발생할수도 있다)

기본적으로 5배정도 처리 속도가 빨라진다.

명령어: @wheel.passive="handlerC"

브라우저 확인