08-Vue核心-事件处理

事件的基本使用

1) 使用v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名

2) 事件的回调需要配置在 methods对象中，最终会在 vm实例对象上

3) methods中配置的函数，不要用箭头函数，否则 this 指向的就不是 vm实例对象了

4) methods中配置的函数，都是被Vue所管理的函数，this的指向是 vm实例对象或组件实例对象

5) @click="demo" @click="demo($event)"效果一样，但后者可以传参

常见的事件有

onclick: 鼠标单击事件；ondblclick: 鼠标双击事件；onmousedown: 鼠标按下去的事件；onmouseup: 鼠标弹起事件；

onmouseover,onmouseenter,onmouseout,onmouseleave, onmousemove 监控鼠标的移入移出，以及移动事件

onkeydown: 按下任意按键的时候触发的事件；onkeyup: 抬起按键的时候触发的事件；onkeypress: 按下并放开任何字母数字键时触发的事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的基本使用</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <h2>欢迎来到{{name}}</h2>
            <!--  点击按钮事件时，会调用showInfo函数  -->
            <button v-on:click="showInfo1">点我提示信息1（不传参）</button>
            <button @click="showInfo2($event,256)">点我提示信息2（传参）</button>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯"
                    }
                },
                methods:{
                    showInfo1(event){
                        // event.target 拿到发生事件的事件目标，这里也就是button目标
                        // event.target.innerText，这里是拿到button目标的文本内容
                        console.log(event.target.innerText)
                        // 这里的 this 代表Vue实例对象
                        console.log(this)
                        alert(this.name + "同学您好，这是您的提示信息1！")
                    },
                    showInfo2(event,number){
                        console.log(event.target.innerText,number)
                        console.log(this)
                        alert(this.name + "同学您好，这是您的提示信息2！")
                    }
                }
            })

        </script>
    </body>
</html>

拓展：事件流（事件捕获和事件冒泡）

在JavaScript中，我们将事件发生的顺序成为“事件流”，当我们触发某个事件时，会发生一系列的连锁反应。

DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

1) 事件捕获

事件捕获是由外到内的。在事件捕获阶段，事件会从 DOM 树的最外层开始，依次经过目标节点的各个父节点，并触发父节点上的事件，直至到达事件的目标节点。

2) 事件冒泡

事件冒泡和事件捕获是完全相反的。事件冒泡是由内到外的，它是从目标节点开始，沿父节点依次向上，并触发父节点上的事件，直至文档根节点，就像水底的气泡一样，会一直向上。

事件修饰符

1) prevent：阻止默认事件

2) stop：阻止事件冒泡

3) once：事件只触发一次修饰符

4) capture：使用事件的捕获模式

5) self：只有event.target是当前操作的元素时，才触发事件

注意：修饰符可以连续写，比如可以这么用 @click.prevent.stop= " showInfo" 或者 @keyup.enter.esc

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px
            }
            .demo{
                height: 65px;
                background-color: skyblue;
            }
            .box1{
                background-color: skyblue;
                padding:5px;
            }
            .box2{
                background-color: orange;
                padding:5px;
            }
        </style>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h2>欢迎来到{{name}}的学习网站</h2>

            <!--1.阻止默认事件修饰符：prevent-->
            <!--<a v-bind:href="url" v-on:click="showInfo">点我提示信息</a>-->
            <a v-bind:href="url" v-on:click.prevent="showInfo">点我提示信息</a>

            <!--2.阻止事件冒泡修饰符：stop-->
            <!--事件冒泡：给父级绑定了事件，子级没有绑定事件，但是当鼠标移入子级的时候会触发父级的事件-->
            <div class="demo" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
            </div>

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

            <!--4.使用事件的捕获模式：capture-->
            <div class="box1" @click.capture="showMsg(111)">
                div1
                <div class="box2" @click="showMsg(222)">div2</div>
            </div>

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

        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                        url:"https://www.cnblogs.com/REN-Murphy/category/2342442.html"
                    }
                },
                methods:{
                    showInfo(event){
                        // event.preventDefault()不执行与该事件关联的默认动作
                        // 这里也就是不执行 <a> 的href="url"跳转链接动作
                        // event.preventDefault()
                        alert(this.name + "同学您好！")
                        console.log(event.target)
                    },
                    showMsg(msg){
                        console.log(msg)
                    }
                }
            })
        </script>
    </body>
</html>

键盘事件

键盘上的每个按键都有自己的名称和编码，例如: 回车键的按键别名(key)为enter，按键编码(keyCode)为13。

v-on:keydown.xxx 或 @keydown.xxx: 按下xxx按键的时候触发的事件

v-on:keyup.xxx 或 @keyup.xxx: 抬起xxx按键的时候触发的事件

v-on:keypress.xxx 或 @keypress.xxx : 按下并放开xxx字母数字键时触发的事件

Vue中常用的按键别名

回车 => enter

删除 => delete（捕获“删除”和“退格”键）

退出 => esc

空格 => space

换行 => tab（换行比较特殊，必须配合 keydown 去使用）

上 => up

下 => down

左 => left

右 => right

Vue中未提供别名的按键

可以使用按键原始的 key 值去绑定，但注意要转为 kebab-cas（多单词小写短横线写法）

系统修饰键（用法比较特殊）：ctrl、alt、shift等

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

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

Vue中自定义按键的别名

Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <h2>欢迎来到{{name}}的学习网站</h2>
            <!--v-on:keyup 或 @keyup: 抬起按键的时候触发的事件-->
            <!--<input type="text" placeholder="按下回车提示输入" v-on:keyup="showInfo">-->
            <input type="text" placeholder="按下回车提示输入1" @keyup="showInfo1">
            <input type="text" placeholder="按下回车提示输入2" @keyup.enter="showInfo2"><br/>
            <input type="text" style="width: 290px" placeholder="按下ESC提示输入" @keyup.esc="showInfo2"><br/>

            <input type="text" style="width: 290px" placeholder="按下自定义按键提示输入" @keyup.malingshu="showInfo2">
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false

            // 定义一个自定义按键（大小写按键 CapsLock 20）
            Vue.config.keyCodes.malingshu = 20

            const vm = new Vue({
                el: "#root",
                data() {
                    return {
                        name: "马铃薯"
                    }
                },
                methods:{
                    showInfo(event){
                        console.log(event.key,event.keyCode)
                    },
                    showInfo1(event){
                        // Enter回车的keyCode编码为13，也就是说当按下回车时，才显示控制台语句
                        if(event.keyCode !== 13) return
                        console.log(event.target.value)
                    },
                    showInfo2(event){
                        console.log(event.target.value)
                    }
                }
            })
        </script>
    </body>
</html>