下面是一個原生DOM event總結(jié)
// 如果是DOM事件,返回正確的事件名;否則返回布爾值 `false`
var isDomEvent=function(obj,evtType){
if(("on" + evtType).toLowerCase() in obj){//如果支持類似于onclick
return evtType;
}
else if($S.transitionend && (evtType === 'transitionend' || evtType === $S.transitionend)){
return $S.transitionend;
}
return false;
};
// 封裝綁定和解除綁定DOM事件的方法以兼容低版本IE
var bindDomEvent = function(obj, evtType, handler){//綁定
var oldHandler;
if(obj.addEventListener){//支持obj.addEventListener
obj.addEventListener(evtType, handler, false);
}
else{
evtType = evtType.toLowerCase();
if(obj.attachEvent){//支持obj.attachEvent
obj.attachEvent('on' + evtType, handler);
}
else{
oldHandler = obj['on' + evtType];//支持obj.onclick模式
obj['on' + evtType] = function(){//obj.onClick=function(){}
if(oldHandler){
oldHandler.apply(this, arguments);
}
return handler.apply(this, arguments);
}
}
}
};
var unbindDomEvent = function(obj, evtType, handler){//解除綁定
if(obj.removeEventListener){//支持obj.removeEventListener解除綁定
obj.removeEventListener(evtType, handler, false);
}
else{
evtType = evtType.toLowerCase();
if(obj.detachEvent){//支持obj.detachEvent解除綁定
obj.detachEvent('on' + evtType, handler);
}
else{
// TODO: 對特定handler的去除
obj['on' + evtType] = null;
}
}
};
var $E={
on:function(obj, evtType, handler){
var tmpEvtType;
if($T.isArray(obj)){//如果是數(shù)組類型,就迭代
for(var i=obj.length;i--;){
$E.on(obj[i], evtType, handler);
}
return;
}
//evtType is a string split by space
if($T.isString(evtType)&&evtType.indexOf(" ")>0){//如果同時監(jiān)聽多個事件
evtType = evtType.split(" ");
for(var i=evtType.length;i--;){//分別監(jiān)聽多個事件
$E.on(obj, evtType[i], handler);
}
return;
}
//handler is an array
if($T.isArray(handler)){//如果回調(diào)函數(shù)是數(shù)組,也迭代監(jiān)聽
for(var i=handler.length;i--;){
$E.on(obj, evtType, handler[i]);
}
return;
}
//evtType is an object
if($T.isObject(evtType)){//json格式
for(var eName in evtType){
$E.on(obj, eName, evtType[eName]);
}
return;
}
//is dom event support
if(tmpEvtType = isDomEvent(obj,evtType)){//如果是dom事件就監(jiān)聽
evtType = tmpEvtType;
bindDomEvent(obj, evtType, handler);
return;
}
//dom event in origin element
if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
evtType = tmpEvtType;
bindDomEvent(obj.elem, evtType, handler);
return;
}
//is specific custom event
if(customEvent[evtType]){//自定義事件
customEvent[evtType](obj,handler);
return;
}
//other custom event
if(!obj.events) obj.events={};
if(!obj.events[evtType]) obj.events[evtType]=[];
obj.events[evtType].push(handler);
},
once:function(obj,evtType,handler){
var f = function(){
handler.apply(win, arguments);//執(zhí)行完一次后就解除綁定
$E.off(obj ,evtType ,f);
}
$E.on(obj ,evtType ,f);
},
off:function(obj,evtType,handler){
//evtType is a string split by space
if($T.isString(evtType)&&evtType.indexOf(" ")>0){//取消監(jiān)聽多個事件,遍歷
evtType = evtType.split(" ");
for(var i=evtType.length;i--;){
$E.off(obj, evtType[i], handler);
}
return;
}
//handler is an array
if($T.isArray(handler)){//取消監(jiān)聽多個回調(diào)函數(shù),遍歷
for(var i=handler.length;i--;){
$E.off(obj, evtType, handler[i]);
}
return;
}
//evtType is an object
if($T.isObject(evtType)){//如果是json形式
for(var eName in evtType){
$E.off(obj, eName, evtType[eName]);
}
return;
}
if(tmpEvtType = isDomEvent(obj,evtType)){
evtType = tmpEvtType;
unbindDomEvent(obj, evtType, handler);
return;
}
//dom event in origin element
if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
evtType = tmpEvtType;
unbindDomEvent(obj.elem, evtType, handler);
return;
}
//is specific custom event
if(customEvent[evtType]){
customEvent._off(obj,evtType,handler);
return;
}
if(!evtType) {
obj.events={};
return;
}
if(obj.events){
if(!handler) {
obj.events[evtType]=[];
return;
}
if(obj.events[evtType]){
var evtArr=obj.events[evtType];
for(var i=evtArr.length;i--;){
if(evtArr[i]==handler){
evtArr.splice(i,1);
return;
}
}
}
}
},
fire:function(obj,evtType){//通過自定義事件來觸發(fā)
var arg = [].slice.call(arguments,2),
tmpEvtType;
//obj is dom element
if(tmpEvtType = isDomEvent(obj,evtType)){
evtType = tmpEvtType;
var evt = document.createEvent('HTMLEvents');
evt.initEvent(evtType, true, true);
obj.dispatchEvent(evt);
return;
}
//dom event in origin element
if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
evtType = tmpEvtType;
var evt = document.createEvent('HTMLEvents');
evt.initEvent(evtType, true, true);
obj.elem.dispatchEvent(evt);
return;
}
if(obj.events&&obj.events[evtType]){
var handler=obj.events[evtType];
for(var i=0,l=handler.length;i<l;i++){
// if(!arg[0]) arg[0] = {};
// arg[0].type = evtType;
// try{
handler[i].apply(window,arg);
// } catch(e){ window.console && console.log && console.log(e.message); };
}
}
},