vue中事件处理类型及使用方法

事件处理

（1） 事件绑定

Vue中提供了v-on的指令，用于给指定元素绑定操作事件，同时也提供了事件操作简介语法

<div v-on:click="handler"></div>
<div @click="handler"></div>

代码操作：

<div id='app'>
    <h2>1、事件的绑定</h2>
    <div class="box" v-on:click="handler">
        v-on:事件名称，可以直接给元素绑定事件
    </div>
    <div class="box" @click="handler">
        @事件名称，同样可以直接给元素绑定事件
    </div>
</div>

 const app = new Vue({
     el: '#app',
     data: {},
     watch: {},
     computed: {},
     methods: {
         handler() {
             alert("用户点击了div")
         }
     }
 })

（2） 事件 对象

事件触发之后，可以通过事件对象，对事件处理进行功能拓展，获取事件发生对象的标签、获取鼠标位置等等

function handler(e) {
    // 兼容写法
    e = e || window.event
    // 获取鼠标位置：可视区域位置、网页文档位置
    var {clientX, clientY} = e		// 相对于窗口的位置
    var {pageX, pageY} = e			// 相对于网页的位置
    var {offsetX, offsetY} = e      // 相对于点击元素的位置
}

代码操作：如何在不同的情况下，事件处理函数中获取并使用事件对象

<h2>2、事件对象</h2>
    <div class="box" @click="handler2">
      如果没有传递参数给处理函数，默认处理函数的第一个形式参数就是事件对象
    </div>
    <div class="box" @click="handler3($event, 'id12')">
      如果事件处理函数需要参数；Vue默认提供了一个显式的事件对象$event，可以传递给对应的处理函数
    </div>
</div>

const app = new Vue({
    el: '#app',
    data: {},
    watch: {},
    computed: {},
    methods: {
        handler() {...},
        handler2(e) {
            console.log(e, "事件对象")
        },
        handler3(e, id){
            console.log(e, id, "传递参数的事件对象")
        }
    }
})

（3） 事件修饰符

通过原生JS事件的操作，包含很多需要预处理的问题，如事件冒泡、元素默认行为等等

// event 原生JS中如何阻止事件冒泡？
if(event.stopPropagation){
    event.stopPropagation()
} else {
    event.cancelBubble = true
}

// event 原生JS中如何阻止浏览器默认行为？
if(event.preventDefault){
    event.preventDefault()
} else {
    event.returnValue = false
}

Vue中将原生JS中操作繁琐的方式，转换成了通过修饰符实现功能的操作方式：

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• .capture：转换触发机制，从冒泡触发事件转变为捕获触发机制
• .self：指定事件只能由当前标签自身触发
• .once：一次性事件
• .passive：2.3.0Vue 还对应 addEventListener 中的 passive 选项]提供了 .passive 修饰符

代码操作：

<h2>3、事件修饰符</h2>
<p>事件冒泡：JS事件语法机制，当前元素的事件被触发之后，就会向上传递继续触发父元素相同的事件，直到根节点；整个这个过程称为事件冒泡</p>
<div class="outer" @click="handlerOuter">
    <div class="inner" @click="handlerInner">
        <button @click="handlerBtn">点击按钮</button>
    </div>
</div>
<p>事件冒泡本质上是一个非常好的效果，但是有些特效场景中不需要，需要阻止事件冒泡</p>
<div class="outer" @click="handlerOuter">
    <div class="inner" @click="handlerInner">
        <button @click.stop="handlerBtn">(阻止冒泡)点击按钮</button>
    </div>
</div>
<p>浏览器中包含了大量的带有默认行为的元素，如表单；操作过程中可能需要阻止这些默认行为</p>
<form action="https://www.baidu.com/s?">
    搜索：<input type="text" v-model="kw"/>
    <button @click.prevent="handlerSearch">点击搜索</button>
</form>
<p>事件的触发：捕获阶段、触发阶段、冒泡阶段，触发机制默认是冒泡触发；Vue提供了一种操作可以让事件在捕获阶段直接触发</p>
<div class="outer" @click.capture="handlerOuter">
    <div class="inner" @click.capture="handlerInner">
        <button @click="handlerBtn">(捕获触发)点击按钮</button>
    </div>
</div>
<p>特定场景中，事件只能由当前标签自身触发</p>
<div class="outer" @click="handlerOuter">
    <div class="inner" @click.self="handlerInner">
        <button @click="handlerBtn">(self自身触发)点击按钮</button>
    </div>
</div>
<p>针对特殊的一次性事件，提供了.once修饰符</p>
<div class="outer" @click.once="handlerOuter">
    <div class="inner" @click.once="handlerInner">
        <button @click="handlerBtn">(once一次性事件)点击按钮</button>
    </div>
</div>

const app = new Vue({
    el: '#app',
    data: {
        kw: ''
    },
    watch: {},
    computed: {},
    methods: {
        handler() {...},
        handler2(e) {....},
        handler3(e, id){...},
        handlerBtn() {
            alert("用户点击了按钮")
        },
        handlerInner() {
            alert("用户点击了div inner")
        }, 
        handlerOuter() {
            alert("用户点击了div outer")
        },
        handlerSearch() {
            // 数据校验
            if(this.kw.trim().length > 0){
                alert("提交搜索")
                window.location.href= "https://www.baidu.com/s?wd=" + this.kw
            } else {
                alert("数据不完善，验证失败")
            }
        }
    }
})

（4） 按键修饰符

一般标签上的事件在操作 过程中，也可以结合键盘按键触发对应的 事件，如按下回车执行！

原生JS中主要通过事件对象的keyCode属性判断某个按键被按下；Vue中提供了内建的按键修饰符以及扩展的可以让开发人员自定义的按键修饰符，让键盘按键完全参与到事件操作中

内建按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰符

• .ctrl
• .alt
• .shift
• .meta

代码操作：

<h2>按键修饰符</h2>
<!-- 用户同时按下ctrl + enter键，触发addMessage事件处理函数 -->
<input type="text" v-model="msg" @keyup.ctrl.enter="addMessage">

addMessage() {
    console.log("用户按下了回车键，开始留言", this.msg)
}