title: vue-事件处理
date: 2017-03-23
- 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);
});
}
