vue3 이벤트 수식어 stop prevent capture self once passive

• prevent / once / prevent.once

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

<script>
export default {
  methods:{
    handler(){
      
      // @click.prevent
      // 기본 동작을 방지 : 네이버로 이동하는것을 방지하고 메서드만 실행하겠다
      // event.preventDefault()

      // @click.once 
      // 클릭이벤트는 여러번 가능하지만 handler라는 메서드는 한번만 실행됨

      // @click.prevent.once
      // chaning 형태로 붙여서 여러개 사용 가능
      console.log('ABC')
    }
  }
}
</script>

 

• @click.stop  / @click.capture  / @click.self

<template>
  <div
    class="parent"
    @click="handlerA">
    <!-- @click.self == parent라는 정확한 영역만 선택할 수 있게끔.
         이경우에는 하위 개체인 child 는 클릭해도 이벤트가 발생하지 않음
    -->

    <div
      class="child"></div>
  </div>
</template>

<script>
export default {
  methods:{
    handlerA(e){
      //event capturing 
      //stop 과 반대 개념
      //버블링 방지
      console.log('a');


      // @click.self 와 동일 개념
      // e.target        =>child 영역 클릭시  child 
      // e.currentTarget =>어딜 클릭해도 parent
      console.log(e.target)
      console.log(e.currentTarget)
    },
    handlerB(){
    // event bubbling
    // 하위 개체를 클릭하면 상위 개체를 같이 클릭하게 되는것을 방지하기 위해
    // stopPropagation 사용

    // -> @click.stop 으로 변경
    
      // event.stopPropagation()
      console.log('b');
    }
  }
}
</script>

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

 

@wheel.passive

<template>
  <div
    class="parent"
    @wheel="handler">
    <div
      class="child"></div>
  </div>
</template>

<script>
export default {
  methods:{
   handler(event){

     //  @wheel.passive 를 이용하면
     // 화면과 console이 독립적으로 움직여 화면을 부드럽게 사용자에게 보여줄수있다.
     for(let i=0; i<10000; i++){
       console.log(event)
     }
   }
  }
}
</script>

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