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<