vue事件(事件指令、事件对象、事件修饰符)

vue事件

1、事件指令：
两种写法：

• (1) v-on:事件名.修饰符="执行的函数名或表达式"

• (2) @事件名="执行的函数名或表达式"

  注意:

• (1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中

• (2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。
  在普通js函数中，加小括号是调用此函数

• (3) this指向:
  methods对象中的函数中，this指向的永远是当前vue实例对象，
  通过this可以访问methods中的函数

2、 事件对象：用来记录一些事件发生时的相关信息的对象

事件可能是：

• 用户在某些内容上的点击
• 鼠标经过某个元素
• 按下键盘上的某些按键
• 可能是web浏览器中发生的事情：
  某个web页面加载完成，或者是用户滚动窗口或改变窗口大小，等等。
• …
  vue中，事件绑定函数中的第一个参数默认是 event 对象
  当执行函数名后面带小括号或有其他参数时，执行后会是undefined，
  需要手动来传入$event，而模板中的$event的名字是固定死的(不能更改)

示例1如下，看看一下vue事件：

  <div id="id">
     
     <button v-on:click="clickTest">点我啊button>
   
     
     <button @click="clickTest2">点我呀button>
     <button @click="clickTest2()">点我呀button>
     
     
     <button @click="clickTest3">来呀来呀button>
  div>

   // 当然先引入vue.js,可直接引用vue的网络地址，最好是下载到本地使用。
   <script src="js/vue.js"></script>
   let app = new Vue({ //实例化vue对象
       el:"#app",
       data:{
          val:"存放数据的",
          num:0
       },
       // 通过内联方式绑定事件处理函数
       // 函数都存放在methods中
       methods:{
            clickTest(){
                console.log("你点击了");
                console.log(this);//this指向当前vue实例对象，只要在Vue实例内的this都指向当前的vue实例对象
                console.log(this.val);//获取data中val值                
            },
            clickTest2(){
                console.log("你也点击了");
                console.log(this);//也指向当前vue实例对象
                console.log(this.$data.val);//同样获取data中val的值
                console.log(this.num++); //获取data中num的值，每点击一次按钮num自增1
           },
           clickTest3(ev){
                console.log(this); // this同样指向当前vue示例
                console.log(ev); // 执行后，在浏览器端可以看到ev输出的是MouseEvent对象
                console.log("x:"+ev.clientX+" "+"y:"+ev.clientY);//获取鼠标距屏幕的距离
                console.log(this.num--);  // 这里也可以获取num的值，每点击按钮一次num自减1                 
           }
        }
   });

再来做个练习，熟悉一下事件对象的用法，示例2如下：

 <div id="app">
        <ul id="list">
            
            <li v-for="user of users" 
                :key="user.id" 
                @click="getUser(user.id,user.name,$event)">
                
                <input type="checkbox"/>
                {{user.name}}
            li>
        ul>
    div>

    <script src="js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
               users:[
                   {
                     id:1,name:"tony"
                   },
                   {
                     id:2,name:"joe"
                   },
                   {
                     id:3,name:"tom"
                   }
               ]
            },
            methods:{
                getUser(id,name,ev){
                    console.log(id+" "+name);
                }
            }
        });
    </script>

3、事件修饰符
我们在学习js事件函数时，我们使用
e.preventDefault()来阻止默认事件、
e.stopPropagation()来阻止事件冒泡，

其实，更好的方法是只有纯粹的数据逻辑，而不是去处理 DOM 事件的细节。
vue提供了事件修饰符，来更方便的，更好的去处理了这些问题。

修饰符是由点.开头的指令后缀来表示的。vue中提供的事件修饰符有：
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self只当在 event.target 是当前元素自身时触发处理函数，事件不是从内部元素触发的
.once点击事件将只会触发一次
.passive滚动事件的默认行为 (即滚动行为)，包括event.preventDefault()情况在内，
将会立即触发，不会等待onScroll完成。
此修饰符尤其能够提升移动端的性能
不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。
.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符
在监听键盘事件时，Vue中可以在使用v-on监听键盘事件时添加按键修饰符：
.enter
vue提供了很多常用的按键码的别名，比如：
.enter -->回车键
.tab -->tab切换键
.delete -->删除和退格键
.esc -->退出键
.space -->空格键
.up -->上键
.down -->下键
.left -->左键
.right -->右键

示例3如下，看看它们怎么用的吧！

  <div id="app">
        <div id="box" @click="dvClick" style="width: 100px;height: 100px;background-color: lightblue;">
            
            

            
            <button id="btn" @click.stop="btnClick">点击2button>
        div>
        <hr>


        
        <a v-on:click.stop="doThis">我是来阻止事件冒泡的a>
        <hr>

        
        <form v-on:submit.prevent="onSubmit" style="border: 1px solid blue;width: 200px;height: 100px;">
        <button type="submit">提交表单button>
        form>
        <hr>

        
        <form action="http://www.baidu.com" v-on:submit>
            <input type="submit" value="提交后访问百度">
        form>
        <hr>

        
        
        <a v-on:click.stop.prevent="onJump" href="事件对象.html">我要跳转a>
        <hr>


        
        
        <div v-on:click.capture="doThis">点一点div>
        <hr>

        
        <div v-on:click.self="doThat">戳一戳div>
        <hr>


        
        
        <div v-on:click.self.prvent="doThis">我不点自己了div>
        <hr>

        
        <div v-on:click.prevent.self="doThis">全都不要点了div>
        <hr>

        
        <a v-on:click.once="doThis">你再点也只触发一次a>
        <hr>
        
        
        <div style="width: 500px;height: 500px;background-color: lightcoral;" v-on:scroll.passive="onScroll">滚动吧div>
        <hr>

         
         <input type="text" v-on:keyup.enter="enterSub" value="调用enterSub函数" />
         <hr>

         
         <input type="text" v-on:keyup.page-down="onPageDown" value="调用onPageDown函数"/>
         <hr>

         
         <button @keyup.13="clickEnter">小手一点button>

    div>

    <script src="js/vue.js"></script>
    <script>
       let app = new Vue({
            el: "#app",
            data: {},
            methods: {
                dvClick() {
                    console.log("我点的是父级div");
                },
                btnClick() {
                    console.log("我点的是父级div下的按钮");
                },
                doThis(){
                    console.log("触发doThis函数");
                },  
                onSubmit(){
                    console.log("表单提交不再重载页面");
                },
                onJump(){
                    console.log("我就不让你跳");
                },
                doThat(){
                    console.log("触发doThat函数");
                },
                onScroll(){
                    conosle.log("滚来滚去");
                },
                enterSub(){
                    console.log("你不按回车我就不让你调用");
                },
                onPageDown(){
                    console.log("你不按下翻我也不让你调用");
                },
                clickEnter(){
                    console.log("你按得是回车键");
                },
            }
        });
    </script>