title: vue-事件处理
date: 2017-03-23

• vue
• 事件

本文介绍vue组件的事件处理，并通过示例模拟vue对原生事件的封装。

vue-事件处理

vue事件处理

此处不再赘述，直接看官方文档。

vue事件处理器

组件事件处理

在使用自定义组件的时候，.stop .prevent等方法均不起作用并报错

Cannot read property 'stopPropagation' of undefined

经分析，在自定义组件的时候，通过vm.$emit('eventName')方法发布事件时，没有将“事件对象”发布出去，导致在外部监听该事件的时候得不到该对象而报错。

正确的做法是在自定义组件的时候，发布事件的同时将“事件对象”同时发布出去，如：vm.$emit('eventName',event,someOtherArgs)

methods: {  
   btnClick(event) {  
        this.$emit('click',event);  
   }  
}  

模拟事件封装

vue事件处理官方文档中提到“有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 event 把它传入方法”（经测试，event的位置可以随便放置），说明vue在原生事件处理的基础上对“事件参数”做了封装。考虑最简单的情况模拟vue封装参数的代码：

function customEventHandler(arguments, callback, originEventName, originEventObject){  // arguments ---- arg1,arg2,$event,args3  

    let arr =  Array.prototype.slice.call(arguments);
    let index = arr.findIndex(function(arg){   
        return '$event' === arg;
    })  

    // 将$event替换为原生的html事件对象  
    if(index != -1){
        arr[index] = originEventObject;
    }
    
    // 注册原生事件  
    document.addEventListener(originEventName,function(){
        callback(...arr);
    });
}