class05：事件处理

一、事件处理

1. v-on绑定事件

v-on:事件名 =“事件函数”，简写：@事件名=“事件函数”

事件函数 => 配置对象的methods对象里面

例1：

<div id="root">
    <div v-on:click="fun">v-on例子1</div>
    <div @click="fun">v-on例子2</div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                name: "尤雨溪",
                age: 36,
                sex: "男",
            }
        },

        // 存储vue事件函数或者以后学习的自定义(封住函数)
        methods: {
            // fun: function () {  
            //     console.log("已完成");
            // },
            // ES6写法：
            fun(){
                console.log("已完成");
            }
        }
    })
</script>

2. this获取data数据

例2： 通过this来获取data中的数据并修改

// 点击按钮修改字体颜色
<style>
    .box {
        color: blue;
    }
    .boxMate{
        color: blueviolet;
    }
</style>
<div id="root">
    <div :class="colorBox">五彩斑斓的黑</div>
    <button @click="changeColor">点击修改颜色</button>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                colorBox: "box"
            }
        },
        methods: {
            changeColor() {
                // this指向vue实例
                console.log(this === vm, this); // true
                // 修改样式
                this.colorBox = "boxMate";
                console.log("colorBox:", this.colorBox);
            }
        }
    })
</script>

注意：在vue里面不推荐使用箭头函数，因为箭头函数中this指向window。所以vue一般使用普通函数。

// 箭头函数
robort:()=>{
    console.log("this:", this);
},

3. 事件传参

<button @click="eventObj">事件对象</button>
<button @click="argSubmit(522)">传参</button>
<button @click="argSubmit1(522, $event)">传参1 + 事件函数</button>
<button @click="argSubmit2(522, $event, 731)">传参2 + 事件函数</button>
<button @click="eventObj">事件对象</button>
<button @click="argSubmit(522)">传参</button>

eventObj(){
    // 事件对象
    console.log(arguments);
},
argSubmit(ev){                    
    // 传参
    console.log(arguments, ev);
},
argSubmit1(num1, $ev){                    
    // 传参 + 事件函数
    console.log(num1, $ev, arguments);
},
argSubmit2(num1, $ev, num2){                    
    // 传参 + 事件函数
    console.log(num1, $ev, num2, arguments);
}

结论：可以看到，当没有传递参数时，事件函数PointerEvent会自传；当传递参数时，参数传递成功但事件函数丢失。需要手动在事件后面手动添加 $event 事件函数。当有多个参数时，注意参数与事件函数的位置要对应，一般来说，事件函数放在末尾。同一事件可以绑定多个函数。

<button @click="argSubmit1(1, 2, $event), argSubmit2(1, 2, 3, 4, 5, $event)">同一事件绑定多个函数</button>

4. 事件修饰符

文档说明：事件处理 — Vue.js (vuejs.org)

​ .prevent 阻止默认事件；
​ .once 只触发一次；
​ .self 只当在 event.target 事件源是自身的时候才会触发；
​ .stop 阻止冒泡；
​ .capture 在事件捕获阶段触发；
​ .passive 事件的默认行为立即触发，无需等待回调函数执行完毕；
​ scroll 滚轴或鼠标滚轮滚动时触发；
​ wheel 鼠标滚轮滚动触发，屏幕键盘上下键 也可触发。

根 -> 目标 => 捕获阶段

目标 -> 根 => 冒泡阶段

例：

<style>
    * {
        margin: 0;
    }
    .box {
        color: green;
    }
    .boxMate {
        color: blueviolet;
    }
    .wrap {
        width: 200px;
        height: 300px;
        background-color: blueviolet;
        overflow: auto;
        color: greenyellow;
    }
    .wrap li {
        height: 200px;
    }
</style>
<div id="root">
    <a href="https://www.baidu.com" @click.prevent="eventA">百度---阻止默认事件</a>
    <!-- 无论点击多少次，只触发一次 -->
    <button @click.once="eventOnce">只触发一次事件</button>

    <hr>
    <div class="box" @click.capture="eventCapture">
        capture:阻止捕获
        <p class="boxMate" @click="eventNotStop">正常冒泡</p>
    </div>
    <div class="box" @click="eventNotCapture">
        正常捕获
        <p class="boxMate" @click.stop="eventStop">stop:阻止冒泡</p>
    </div>
    <!-- 根 -> 目标 => 捕获阶段 -->
    <!-- 目标 -> 根 => 冒泡阶段 -->
    <div class="box" @click="eventNotCapture">
        正常捕获
        <p class="boxMate" @click="eventNotStop">正常冒泡</p>
    </div>

    <hr>
    <div @click.self="eventSelf1">
        Self事件源111
        <p @click.self="eventSelf2">Self事件源222</p>
    </div>

    <hr>
    <ul class="wrap" @wheel.passive="eventScroll">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>

    let vm = new Vue({
        el: "#root",
        data() {
            return {
                colorBox: "box"
            }
        },

        // 存储vue事件函数或者以后学习的自定义(封住函数)
        methods: {
            eventA() {
                console.log("阻止默认事件：不跳转");
            },
            eventOnce() {
                console.log("只触发一次事件");
            },
            eventCapture() {
                console.log("capture:阻止捕获");
            },
            eventStop() {
                console.log("stop:阻止冒泡");
            },
            eventNotCapture() {
                console.log("正常捕获");
            },
            eventNotStop() {
                console.log("正常冒泡");
            },
            eventSelf1() {
                console.log("Self事件源111", event.target);
            },
            eventSelf2() {
                console.log("Self事件源222", event.target);
            },
            eventScroll() {
                for (let index = 0; index < 99999; index++) {
                    console.log("循环遍历");
                }
                console.log("滚动");
            }
        }
    })
</script>

说明：eventScroll()函数中，函数循环99999次以后才会触发滚动事件使页面滚动，使用事件修饰符.passive可以立即执行默认行为，即立即触发页面滚动行为而不必等待回调函数eventScroll()执行完成。

注意：使用修饰符时，顺序很重要；顺序不同产生的效果也不同。

如：用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

5. 按键修饰符

文档说明：事件处理 — Vue.js (vuejs.org)

.enter 回车
.delete 捕获“删除”和“退格”键
.esc 返回
.space 空格
.up 上箭头
.down 下箭头
.left 左箭头
.right 右箭头
.tab 换焦点

例：

<div id="root">
    <button @click="fun">点击</button>
    <!-- keyUp 按键抬起事件 -->
    <input type="text" @keyUp="fun">

    ---------------------<br />
    <!-- 设置只允许指定修饰符触发 -->
    <!-- placeholder：输入框提示值 -->
    <input type="text" @keyup.enter="fun" placeholder="enter">
    <input type="text" @keyup.esc="fun" placeholder="esc">
    <input type="text" @keyup.down="fun" placeholder="down">

    <!-- 设置自定义指定修饰符 -->
    <!-- 按字母q触发 -->
    <input type="text" @keyup.q="fun" placeholder="q">
    <!-- 后期废了ev.keyCode -->
    <!-- <input type="text" @keyup.81="fun" placeholder="81"> -->

    <!-- 自定义多个指定字符 -->
    <input type="text" @keyup.a.b="fun" placeholder="a || b">

    <!-- 链接符才能触发的系统修饰符 -->
    <!-- 必须写page-up而不是PageUp -->
    <input type="text" @keyup.page-up="fun" placeholder="page-up">
    <input type="text" @keyup.page-down="fun" placeholder="page-down">

    <!-- 按下相应按键keydown才能触发的系统修饰符 -->
    <input type="text" @keydown.tab="fun" placeholder="tab">
    <input type="text" @keydown.ctrl="fun" placeholder="ctrl">
    <input type="text" @keydown.alt="fun" placeholder="alt">
    <input type="text" @keydown.shift="fun" placeholder="shift">
    <input type="text" @keydown.meta="fun" placeholder="meta"><!-- meta即window -->

    <!-- 组合键触发函数 -->
    <input type="text" @keydown.ctrl.enter="fun" placeholder="ctrl+enter">
    <input type="text" @keydown.ctrl.A="fun" placeholder="ctrl+a">

    <!-- 其他事件 alt+点击触发-->
    <button @click.alt="fun">alt+点击触发</button>

    <!-- .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件 -->
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="fun">Only Ctrl</button>
    <button @click.exact="fun">Not Sys</button>

</div>
<script>

    let vm = new Vue({
        el: "#root",
        data() {
            return {
            }
        },
        // 存储vue事件函数或者以后学习的自定义(封住函数)
        methods: {
            // 原生js写法
            fun(ev) {
                // 键码值
                console.log("输入:", ev.key, ev.keyCode);
                // Enter键触发
                if (ev.keyCode !== 13) return;
            },

        }
    })
</script>