02-vue事件

02-VUE事件

---

1.事件处理

事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;

<div id="root">
    <h2>学校名称：{{name}}}</h2>
    <button v-on:click="ShowInfo1">点我提示信息</button> -->
    <button @click="ShowInfo1">点我提示信息</button>
</div>

​ 2.事件的回调需要配置在methods对象中，最终会在vm上;

const vm=new Vue({
    el:'#root',
    data:{
        name:'尚硅谷'
    },
    methods:{
        ShowInfo1(event){
            alert("同学你好！")
        },
    }
})

​ 3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;

ShowInfo3:(event)=>{
    console.log(event.target);
    console.log(this);
}

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

ShowInfo1(event){
    console.log(event.target);
    console.log(this);
}

​ 5.@click=“demo"和@click=” demo($event)"效果一致， 但后者可以传参;

<button @click="ShowInfo2($event,66)">点我提示信息2（不传参）</button>

ShowInfo2(event,number){
    console.log(number);
},

---

2.事件修饰符

Vue中的事件修饰符:
1.prevent:阻止默认事件(常用) :

超链接标签会在执行完点击事件后进行地址跳转，这是它的默认事件，我们可以在点击事件中通过event.preventDefault()方法取消或者使用VUE的事件修饰符prevent取消默认跳转事件

ShowInfo(event) {
    alert("同学你好！");
    console.log(event.target);
    event.preventDefault()
}

<!-- 阻止默认事件(常用) -->
<a href="https://www.baidu.com" @click.prevent="ShowInfo1">点我提示信息1</a>

​ 2.stop:阻止事件冒泡(常用) :

当某个元素被设置了事件，其子元素会因为事件冒泡而被加上父元素的事件，我们可以在点击事件中通过event.stopPropagation()方法取消或者使用VUE的事件修饰符stop取消事件冒泡

ShowInfo(event) {
    alert("同学你好！");
    event.stopPropagation()
}

<!-- 阻止事件冒泡(常用) -->
<div class="demo1" @click="ShowInfo">
    <button @click.stop="ShowInfo">点我提示信息2</button>
</div>

​ 3.once: 事件只触发一次(常用) ;

<!-- 事件只触发一次(常用) -->
<button @click.once="ShowInfo">点我提示信息3</button>

​ 4.capture:使用事件的捕获模式;

事件处理机制的三个阶段：1.捕获 2.目标 3.冒泡，一般到冒泡阶段事件才执行

<div class="box1" @click="ShowMsg1">
    div1
    <div class="box2" @click="ShowMsg2">
        div2
    </div>
</div>

先点击div1再点击div2，div2在冒泡阶段会先向div1冒泡，所以先输出2，然后输出1

<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="ShowMsg1">
    div1
    <div class="box2" @click="ShowMsg2">
        div2
    </div>
</div>

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

因为事件冒泡，所以控制台会输出两次事件触发的对象

<div class="demo1" @click="ShowInfo">
    <button @click="ShowInfo">点我提示信息4</button>
</div>

ShowInfo(event) {
    console.log(event.target);
}

设置self后：

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

​ 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

当我们设置一个鼠标滚轮事件或者滚动条事件时，如果在事件中添加一个耗时比较大的程序进程就会导致滚动条需要等到这个程序进程完成后然后滚动条才能移动，这样的观感并不是很好，所以可以通过设置passive事件修饰符，先使得滚动条移动的默认行为执行，然后在执行其他程序进程

<ul @scroll.passive="demo" class="list">
<!-- <ul @wheel.passive="demo" class="list"> -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

demo(){
    for (let i = 0; i < 1000; i++) {
        console.log("@");
    } 
}

---

3.键盘事件

1.Vue中常用的按键别名：

回车    =>  enter
删除    =>  delete(捕获“删除”和退格”键)
退出    =>  esc
空格    =>  space
换行    =>  tab
上      =>  up
下      =>  down
左      =>  left
右      =>  right

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

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

特殊的按钮，如：切换大小写:caps-lock

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

<input type="text" placeholder="按下回车键提示输入" @keydown.meta="ShowInfo">

4.也可以使用keyCode去指定具体的按键（不推荐）

ShowInfo(event) {
    if (event.keyCode !== 13) return
    console.log(event.key); //获取按键的内容
}

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

Vue.config.keyCodes.huiche=13;

<input type="text" placeholder="按下回车键提示输入" @keydown.huiche="ShowInfo">

if (event.keyCode !== 13) return
    console.log(event.key); //获取按键的内容
}

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

Vue.config.keyCodes.huiche=13;

<input type="text" placeholder="按下回车键提示输入" @keydown.huiche="ShowInfo">