addEventListener 和attachEvent 兼容性封装
addEventListener 和attachEvent 是DOM2级事件绑定的方法,但是IE只支持attachEvent ,并且在有同一个事件源执行多个事件名相同的方法时,会有this指向,顺序,重复的问题,下面函数是进行封装的,兼容所有的浏览器。
var tempFn = null;
function bind(curEle,eventType,eventFn){
if("addEventListener" in document){
curEle.addEventListener(eventType,eventFn,false);
return;
}
//解决this指向问题,并记录改变this前的eventFn
tempFn = function(){
eventFn.call(curEle)
}
tempFn.photo = eventFn;
//判断该自定义属性之前是否存在,不存在就创建,存储多个方法改变this指向后的结果
if(!curEle['myBind'+eventType]){
curEle['myBind'+eventType] = [];
}
//解决重复问题
// 添加前,看一下之前是否已经有了,有了就不添加,也不往事件池中存储
var ary = curEle['myBind'+eventType]
for(var i = 0 ; i < ary.length; i++){
if(ary[i].photo == eventFn){
return;
}
}
ary.push(tempFn);
curEle.attachEvent("on"+eventType,tempFn);
}
function unbind(curEle,eventType,eventFn){
if("removeEventListener" in document){
curEle.removeEventListener(eventType,eventFn,false);
return;
}
var ary = curEle['myBind'+eventType];
for(var i = 0 ; i < ary.length; i++){
if(ary[i].photo == eventFn){
//找到后解除绑定
curEle.detachEvent("on"+eventType,ary[i]);
//移除自定义属性中对应的那一项
arr.splice(i,1);
break;
}
}
}
//解决顺序问题
function on(curEle,eventType,eventFn){
if(!curEle['myBind'+eventType]){
curEle['myBind'+eventType] = [];
}
var ary = curEle['myBind'+eventType]
for(var i = 0 ; i < ary.length ; i++){
var cur = ary[i];
if(cur == eventFn){
return;
}
}
ary.push(eventFn);
bind(curEle,eventType,run)
}
function off(curEle,eventType,eventFn){
var ary = curEle['myEvent' + eventType];
for(var i = 0 ; i < ary.length; i++){
var cur = ary[i];
if(cur == eventFn){
ary.splice(i,1)
}
}
}
function run(e){
e = e || window.event
var flag = e.target? true:false;
if(!flag){
e.target = e.srcElement;
e,pageX = e.clientX +(document.documentElement.scrollLeft || document.body.scrollLeft)
e,pageY = e.clientY +(document.documentElement.scrollTop || document.body.scrollTop)
e.preventDefault = function(){
e.returnValue = false
}
e.stopPropagation = function(){
e.cancelBubble = true;
}
}
//this ----> e.target
var ary = this['myEvent'+e.type];
for(var i = 0 ; i < ary.lengthl i++){
var tempFn = ary[i];
tempFn.call(this,e);
}
}