title: vue-事件處理
date: 2017-03-23
- vue
- 事件
本文介紹vue組件的事件處理恨统，并通過示例模擬vue對原生事件的封裝。
vue-事件處理
vue事件處理
此處不再贅述里覆，直接看官方文檔。
組件事件處理
在使用自定義組件的時候缆瓣，.stop .prevent等方法均不起作用并報錯
Cannot read property 'stopPropagation' of undefined
經(jīng)分析喧枷，在自定義組件的時候，通過vm.$emit('eventName')方法發(fā)布事件時，沒有將“事件對象”發(fā)布出去隧甚，導(dǎo)致在外部監(jiān)聽該事件的時候得不到該對象而報錯车荔。
正確的做法是在自定義組件的時候，發(fā)布事件的同時將“事件對象”同時發(fā)布出去戚扳，如：vm.$emit('eventName',event,someOtherArgs)
methods: {
btnClick(event) {
this.$emit('click',event);
}
}
模擬事件封裝
vue事件處理官方文檔中提到“有時也需要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件忧便。可以用特殊變量 event 把它傳入方法”（經(jīng)測試咖城，event的位置可以隨便放置）茬腿，說明vue在原生事件處理的基礎(chǔ)上對“事件參數(shù)”做了封裝∫巳福考慮最簡單的情況模擬vue封裝參數(shù)的代碼：
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);
});
}
