麦子学院 2017-07-30 23:31
Javascript学习之事件库的封装详解
回复:0 查看:2544
在浏览器中，对于事件的操作，兼容性主要是存在
DOM2
级事件里面，标准浏览器是通过
addEventListener()
和
removeEventListener()
来注册事件和绑定事件，在低级版本的
IE浏览器
里面是有对应的
attachEvent()
和
detachEvent()
；再者是里面传入的事件行为，标准的不带
on
，
IE
带
on
；接着是事件处理函数里面的
this
指向；事件重复绑定的问题，事件绑定顺序与执行顺序的问题
//
事件绑定的元素，事件类型，事件处理函数
function
on(ele,
type,fn){
//
区分浏览器
if(ele.addEventListener){
ele.addEventListener(
type,fn,false);//
冒泡
}
else{ // IE6-8
if(!ele['on'+
type]){
ele['on'+
type]=[];
//
解决
run
被重复绑定的问题
ele.attachEvent('on'+
type,
function(){
run.call(ele);
})
}
//
去重判断，解决重复绑定的问题
for(
var i=0;i<ele['on'+
type].length;i++){
if(a
===fn) return;
}
ele['on'+type].push(fn);
}
}//拿到"数组"中的每个方法，进行顺序调用 主要是针对IE浏览器的设置function run(){
var e=window.event;
//对事件对象做兼容处理
e.target=e.srcElement; // 事件源
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX; // clientX/Y:鼠标点击的位置距离可视区页面左上角的距离 scrollLeft：是滚动条滚动的距离（IE兼容处理），pageX/Y：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
e.preventDefault=function(){//阻止默认事件
e.returnValue=false;
};
e.stopPropagation=function(){
e.cancelBubble=true;//阻止冒泡；
};
// this是指向ele
var a=this["on"+e.type];
if(a.length){//证明数组有长度，可以循环调用；
for(var i=0; i<a.length; i++){
if(typeof a==='function'){
a.call(this,e);//fn1 fn2 fn3
}else{
a.splice(i,1); // 移除
i--; // 防止数组塌陷
}
}
}
}
//从"数组"中找到要"解除绑定"的方法，赋值为nullfunction off(ele,type,fn){
if(ele.removeEventListener){
ele.removeEventListener(type,fn,false);
}else{
//拿到数组，遍历判断，并赋值为null
var a=ele["on"+type];
for(var i=0; i<a.length; i++){
if(a===fn){
a=null;
break;
}
}
}
}
来源：简书