10 事件处理

10.1 事件基本使用

在这里我们使用单击事件为例，简单讲讲在vue中单击事件的编写以及细节问题

在vue中想要实现点击事件，需要新增一个指令:v-on:click,后面跟对应的函数

<button v-on:click="showInfo">点我提示信息</button>

对于这个函数的编写，也是有讲究的，如果按照下图直接按照传统函数JS编写会报错

因为vue实例读取不到这个函数，我们需要配置methods属性，把事件的回调写到里面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎学习：{{name}}</h2>
        <button v-on:click="showInfo">点我提示信息</button>
    </div>
    <!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
      Vue.config.productionTip = false
        const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                 showInfo(){
                 alert("你好！")
                }
            }
        }) 
    </script>
</body>
</html>

再次运行，完美解决

其他回调函数也是一样的写法，都要写在vue的属性methods里面,让vue可以读取到这个回调函数

10.1.1 验证问题

1 回调函数是否可以传参

2 回调函数里面的this是什么

验证1：发现只能接受到第一个参数，第一个参数就是调用函数本身的元素，我们通过这个元素获取到了它对应的文本

验证2：函数里面当前的this就是vue实例对象

10.1.2 一个原则

当我们写vue回调函数的时候，最好不要写成箭头函数，不然这个this就不是vue实例对象，而是全局的window对象

所有被vue管理的函数，最好都要写普通函数，不要写成剪头函数，不然就使用不了this了

所以有一个原则：所有被vue管理的函数，最好都要写普通函数，不要写成剪头函数，不然就使用不了this了

10.1.3 简写模式

v-on-click可以简写成@click,效果是一样的(v-on=@)，由于后者编写比较简便，通常后者使用的更多

10.1.4 自由传参以及参数占位符

如果我们想传参，比如点击删除按钮,需要吧id传到函数里面，我们可以在方法后跟参数

但是这样就收不到event了

那么这个问题怎么解决呢？其实vue提供了占位符可以给供我们使用

注意：$event是vue的关键字，只能这么写，不然识别不出来，而且参数顺序必须对上！

10.1.5 总结

事件的基本使用：
1 使用v-on:xxx或者简写成@xxx绑定事件，其中xxx是事件名称
2 事件的回调需要配置在methods对象中，最终会在vm上
3 methods中配置的函数，不要用箭头函数！否则this就不是vm了
4 methods中配置的函数，都是被vue管理的函数，this的指向是vm或组件实例对象
5 @click="xxx"和@click="xxx(100,$event)"效果是一样的，但是后者可以传参，可以用$event作为参数占位符，需要注意传参和接受参数的顺序是否一致

10.2 事件修饰符

vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个
1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)

10.2.1 阻止默认事件(常用)

首先写一个简单的例子，一个简单的超链接标签，我们给一个百度链接和一个单击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎学习：{{name}}</h2>
        <a href="http://www.baidu.com" @click="showInfo">点我提示信息</a>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false
        const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                showInfo(){
                    alert("你好！")
                }
            }
        }) 
    </script>
</body>
</html>

查看页面，虽然点击文字出现了弹窗，但是随之跳到了超链接指向的地址

跳转到链接是a标签的默认行为，那么我们怎么阻止这个默认行为呢？

普通阻止默认行为方式

使用参数对象的preventDefault方法

<a href="http://www.baidu.com" @click="showInfo">点我提示信息</a>
   const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                showInfo(e){
                   //阻止默认行为
                    e.preventDefault()
                    alert("你好！")
                }
            }
        })

这时候浏览器点击文字提示弹框后就不会跳转了

vue阻止默认行为方式

在vue中，不用我们亲自编写上面的方式，我们可以在事件名称后面跟一个.prevent就可以阻止默认行为了，效果都是一样的

<!-- .prevent:阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

10.2.2 阻止事件冒泡(常用)

编写代码，实现例子

我们发现，单击玩确定后会继续弹窗，这就是一个冒泡事件

阻止的方式和上一个例子类似，我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

<!--   .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">点我提示信息</button>

再次验证浏览器，解决问题

10.2.3 事件只触发一次(常用)

编写代码

如图，按钮点击多少次，就会弹窗多少次

我们加上once修饰符

<!--   3.once:事件只触发一次 -->
 <button @click.once="showInfo">点我提示信息</button>

这时候页面按钮点击几次只会出现第一次弹窗

10.2.4 使用事件的捕捉模式 (不常用)

<!--  4.captrue:使用事件的捕捉模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1 
        <div  class="box2" @click="showMsg(2)">
            div2
        </div>
      </div>

10.2.5 只有event.target是当前操作的元素时才触发事件(不常用)

<!--     5.只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

10.2.6 事件的默认行为立即执行，无需等待事件回调执行完毕不常用)

完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: red;
        }
        .box2{
            padding: 5px;
            background-color: green;
        }
        .list{
            width: 200px;
           height: 200px;
           background-color: aqua;
           overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎学习：{{name}}</h2>
        <!--    1.prevent:阻止默认事件(常用) -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!--   2.stop:阻止事件冒泡(常用) -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!--   3.once:事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>
         <!--  4.captrue:使用事件的捕捉模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1 
        <div  class="box2" @click="showMsg(2)">
            div2
        </div>
      </div>
      <!--     5.只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>
        <!--   6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用) -->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false
        const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                showInfo(e){
                    alert("你好！")
                   console.log(e.target)
                },
                showMsg(num){
                    console.log(num)
                },
                demo(){
                    for (let i = 0; i < 10000; i++) {
                       console.log("!") 
                    }
                }
            }
        }) 
    </script>
</body>
</html>

10.2.7 多个修饰符使用小技巧

比如现在有个需求，我们知道点击超链接后会弹窗然后跳转到指定的url，那么我们又想阻止冒泡，又想阻止默认行为，该怎么办呢？

我们可以多个修饰符一起使用，比如

// 多个事件修饰符一起使用，可以随意顺序
 <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

页面上只会弹窗就不跳转了

10.3 键盘事件

先写一段代码，这里我选择的键盘事件是keyup,当然用keydown也是没问题的

问题来了，什么按键都能触发事件，我们期望的是只能按下回车键才能打印输入的值，那么：如何判断回车呢？

10.3.1 传统方式判断案件编码

最原始的办法，就是判断按键编码

<input type="text" placeholder="按下回车提示输入"@keyup="showInfo">
           showInfo(e){
                    // 如果按键没有按回车，就不打印日志 13就是回车键的编码
                    if(e.keyCode!==13){
                        return;
                    }
                    console.log(e.target.value)
                }

查看页面，我们发现功能已经实现了，我们输入内容必须按下回车，才能打印日志，按其他键都不好使

10.3.2 vue判断案件编码

在vue中，我们不用亲自判断按键编码，我们只需要在事件后面跟上修饰.enter就代表回车了

<input type="text" placeholder="按下回车提示输入"@keyup.enter="showInfo">

10.3.3 vue中9个按键别名

通常称enter为别名，vue给按键都起了别名，一共有九个：

回车:enter

删除(退格):delete

退出:esc

空格:space

换行:tab(特殊，必须配合keydown使用)

上:up

下:down

左:left

右:right

10.3.4 vue自定义绑定按键

如果我们想要绑定的按键不在vue提供的9个按键内，那该怎么办呢？比如我就想要用CapsLock(企鹅换大小写)

首先要知道：键盘上任意的一个按键都有自己的按键和编码

我们可以通过key和keyCode分别获取案件名称和对应的编码

按下键盘的caps，看到控制台提示按键叫CapsLock，对应的编码为20

10.3.5 多个单词按键特殊处理

上面我们已经知道了，大小写的按键叫CapsLock,那么我们直接使用,CapsLock是否就能直接限制只能大小写按键呢？

答案是否定的，按下caps切换大小写没有任何反应

这里就要强调下了，在vue中这种多个单词的情况下，不能写原生的按键名称，要把首字母的大写全部换成小写，并且直接用-进行拼接

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

再次测试解决问题，这种情况较少，我们需要格外注意

不是全部的按键都能绑定事件的，个别特殊按钮也是不行的

10.3.6 5个特殊按键

在一些按键中，因为特殊的机制，需要我们特殊处理，我们简单介绍下

tab按键

我们都知道，tab按键可以转移光标，这个按键比较特殊，我们不能直接使用tab去绑定事件，不然会发现是无效的，只会切换光标

所以当使用tab的时候，不应该使用keyup,应该使用keydown

发现虽然光标已经移走了，但是已经实现了我们的需求

ctrl,alt,shift,meta(window)按键

这四个按键我们一般称为系统修饰键(用法比较特殊)，我们一般使用keydown而不是keyup按键

1 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能触发

2 配合keydown使用：正常触发事件

如果我们非要用keyup事件，需要配合一个其他按键，任意的都行，我们以ctrl为例

我这里按的是ctrl+Q 触发事件

如果是使用keydown，就没有这么麻烦了，我们直接按下ctrl即可

我这里只按下了ctrl

10.3.7 通过键玛绑定按键事件

上面我们的案例都是绑定按键名，我们知道每一个按键都有对应的键码，我们可以通过键码去绑定事件，我这里以enter(回车)为例，它的键码是13

也是没有任何问题的

但是通过键码绑定按键事件的方式已经不推荐使用了,原因如下

部分浏览器已经不支持按键编码绑定事件的格式的，而且这种方式正常被废除，不同的电脑的按键有可能是不同的，也会造成不必需要的麻烦

所以我们应该少用甚至不用这种方式，应该使用按键名称绑定事件

10.3.8 自定义按键别名

我们上述使用的按键名称，比如enter回车，都是vue帮我们定义的，我们也可以自定义一些别名

比如我不想用enter，就想叫huiche，这时候怎么处理呢？

其实vue也给我们提供了解决方法，我们可以使用Vue.config.keyCodes去定义，语法如下

// 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键
        Vue.config.keyCodes.huiche=13

按下enter回车键，效果一样的

但是这种方式也是不推荐的，一般vue给我们提供的别名就够用了

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎学习：{{name}}</h2>
       <input type="text" placeholder="按下回车提示输入" @keydown.huiche ="showInfo">
    </div> 
    <script type="text/javascript">
        Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键
        const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                showInfo(e){            
                    console.log(e.target.value)
                }   
            }
        }) 
    </script>
</body>
</html>

10.3.9 多个按键拼接使用

这时候有个需求，必须是按下ctrl+y只会才能打印日志，那么这时候我们可以这样，在ctrl后拼接y

// ctrl+y一起按 
       <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y ="showInfo">

发现没有问题，只能是ctrl+y才会触发事件打印日志

Vue(Vue2+Vue3)——10.事件处理