04-vue的事件处理器

Posted 2021-09-18 Ultraman_agul

vue事件处理器

1.1 @click=“handleClick”

不加小括号的事件处理方式，vue会自动传递事件对象，可以在事件处理函数中获取事件对象，但是无法传递自定义的参数

 <div id="box">
     {{count}}
     <br>
     <button @click="handleClick">事件处理-自动传递事件对象-无法传递参数</button>
 </div>
 <script>
     var vm = new Vue({
         el:"#box",
         data:{
             count:0
         },
         methods:{
             handleClick(eve){
                 this.count++;
             }
         }
     })
 </script>

1.2 @click=“handleClick($event,2)”

$event:固定写法，手动传递，vue会根据传递的$event参数获知需要传递的事件对象，自定义的参数传递从第二个参数开始。

<div id="box">
    {{count}}
    <br>
    <button @click="handleClick($event,2)">事件处理-手动传递事件对象-传递参数</button>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            count:0
        },
        methods:{
            handleClick(eve,data){
                console.log(eve.target)
                this.count += data;
            }
        }
    })
</script>

1.3 直接在行内事件指令中书写代码

在行内写代码，这种方式一般不会使用

<div id="box">
   {{count}}
   <br>
   <button @click="count+=3">直接在行内事件指令中书写代码</button>
</div>
<script>
   var vm = new Vue({
       el:"#box",
       data:{
           count:0
       }
   })
</script>

1.4 事件修饰符:

• .stop:阻止事件冒泡

  阻止冒泡:在vue中子父级都绑定了同一事件，如原生一样会有事件冒泡行为

  原生js使用e.stopPropagation()阻止事件冒泡

<div id="box">
   <div @click="divClick">
       <button @click="butClick">事件冒泡</button>
   </div>
</div>
<script>
   var vm = new Vue({
       el:"#box",
       data:{},
       methods:{
           divClick(){
               console.log("divClick");
           },
           butClick(eve){
               //原生方式实现阻止冒泡
               eve.stopPropagation();
               console.log("butClick");
           }
       }
   })

​ vue中使用事件修饰符实现阻止冒泡行为

​ 事件修饰符 .stop阻止冒泡

<div id="box">
    <div @click="divClick">
        <!-- 事件修饰符.stop阻止事件冒泡 -->
        <button @click.stop="butClick">事件冒泡</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{},
        methods:{
            divClick(){
                console.log("divClick");
            },
            butClick(){
                console.log("butClick");
            }
        }
    })
</script>

案例：模态框的显示隐藏

<div id="box">
  <!-- @click="isShow=true"点击时显示main -->
  <button @click="isShow=true">show</button>
  <!-- @click="isShow=false"点击时main区域时，main隐藏 -->
  <div class="main" v-show="isShow" @click="isShow=false">
      <!-- 在container上需要使用@click.stop来阻止冒泡，否则当用鼠标在文本框中点击获取焦点时，会冒泡触发main中的点击操作 -->
      <div class="container" @click.stop>
          <p>用户名：<input type="text"></p>
          <p>密&emsp;码：<input type="password"></p>
          <hr>
          <p><button>登录</button</p>
      </div>
  </div>
</div>
<script>
  var vm = new Vue({
      el : "#box",
      data : {
          isShow : false
      }
  })
</script>

• .prevent：阻止默认行为

<a href="http://www.baidu.com" @click.prevent>跳转</a>

• .self ：只在当前元素上点击才触发事件,可以无需使用@click.stop就达到阻止事件冒泡的效果

上面的显示模态框案例可以作如下修改

<div id="box">
 <!-- @click="isShow=true"点击时显示main -->
 <button @click="isShow=true">show</button>
 <!-- 
     @click="isShow=false"点击时main区域时，main隐藏 
     @click.self="isShow=false":事件指令后加上self修饰符表示只有点击在当前元素上才会触发事件，在其它元素上点击，不会触发该事件
 -->
 <div class="main" v-show="isShow" @click.self="isShow=false">
     <div class="container">
         <p>用户名：<input type="text"></p>
         <p>密&emsp;码：<input type="password"></p>
         <hr>
         <p><button>登录</button</p>
     </div>
 </div>
</div>
<script>
 var vm = new Vue({
     el : "#box",
     data : {
         isShow : false
     }
 })
</script>

• .once:只触发一次事件

<div id="box">
    <button @click.once="handleClick">click</button>
</div>
<script>
    var vm = new Vue({
        el : "#box",
        methods : {
            handleClick(){
                console.log("hello")//只执行了一次
            }
        }
    })
</script>

• .passive

  每次事件产生，浏览器都会云查询一下是否有preventDefault阻止该事件的默认行为，如果加上passive修饰符，程序会告诉浏览器，不用查询了，这里没有使用preventDefault阻止默认行为。

<a href="http://www.baidu.com" @click.passive="handleClick">百度</a>
<script>
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            handleClick(eve){
                // 事件中使用了 .passive ,就会跳过对preventDefault的查询，提高程序性能,此时的preventDefault操作是无效的
                eve.preventDefault();
                console.log("阻止了");
            }
        }
    });
</script>

一般用于页面的滚动监听等高频触发事件，如@scroll，@touchmove等事件，因为滚动监听的过程中，移动每一个像素都会触发一次事件，每次使用内核线程查询preventDefault会导致滑动卡顿，通过passive修饰会使得内核线程跳过查询，可以大大提升滑动的流畅度

• 键盘按键修饰符：用于键盘事件

  • .enter表示键盘按下了enter键

  <div id="box">
      <input type="text" @keydown.enter="keyBoardEven">
  </div>
  <script>
      var vm = new Vue({
          el:"#box",
          data:{},
          methods:{
              keyBoardEven(){
                  console.log("按下了回车")
              }
          }
      })
  </script>
  

  • @keydown.enter.ctrl:表示组合键的触发

  <div id="box">
      <input type="text" @keydown.enter.ctrl="keyBoardEven">
  </div>
  <script>
      var vm = new Vue({
          el:"#box",
          data:{},
          methods:{
              keyBoardEven(){
                  console.log("触发了")
              }
          }
      })
  </script>
  

  • @keydown.65:按下了A键

  <input type="text" @keydown.65="keyBoardEven">