下面是一个原生DOM event总结
// 如果是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)){//如果是数组类型，就迭代
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){//如果同时监听多个事件
evtType = evtType.split(" ");
for(var i=evtType.length;i--;){//分别监听多个事件
$E.on(obj, evtType[i], handler);
}
return;
}
//handler is an array
if($T.isArray(handler)){//如果回调函数是数组，也迭代监听
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事件就监听
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);//执行完一次后就解除绑定
$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){//取消监听多个事件，遍历
evtType = evtType.split(" ");
for(var i=evtType.length;i--;){
$E.off(obj, evtType[i], handler);
}
return;
}
//handler is an array
if($T.isArray(handler)){//取消监听多个回调函数，遍历
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){//通过自定义事件来触发
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); };
}
}
},
