101 事件 [~ie8] 事件标准化

//tool.js

//跨浏览器获取视口
function getInner()
{
    if(typeof window.innerWidth!="undefined")
    {
        return{
            width:window.innerWidth,//火狐,IE9以下不支持
            height:window.innerHeight
        }
    }
    else
    {
       return {
           width:document.documentElement.clientWidth,//W3C&&兼容IE
           height:document.documentElement.clientHeight
       }
    }
}
//设置css
function getStyle(element,attr)
{
    if(typeof window.getComputedStyle!="undefined")
    {
        return window.getComputedStyle(element,null)[attr];
    }
    else if(typeof element.currentStyle !="undefined")
    {
        return element.currentStyle[attr];
    }
}
//判断class是否存在
function hasClass(element,className)
{
    return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))
}
//获取Event
function getEvent(event)
{
    return event||window.event;
}
//阻止默认行为
function preDef(event)
{
    var e=getEvent(event);
    if(typeof e.preventDefault!="undefined")
    {
        e.preventDefault();
    }
    else//IE
    {
        e.returnValue=false;
    }
}
//跨浏览器添加事件绑定
function addEvent(obj, type, fn) {
    if (typeof obj.addEventListener != 'undefined') {
        obj.addEventListener(type, fn, false);
    } else {
        //创建一个存放事件的哈希表(散列表)
        if (!obj.events) obj.events = {};
        //第一次执行时执行
        if (!obj.events[type]) {
            //创建一个存放事件处理函数的数组
            obj.events[type] = [];
            //把第一次的事件处理函数先储存到第一个位置上
            if (obj['on' + type]) obj.events[type][0] = fn;
        }
        else
        {
            if(addEvent.equal(obj.events[type],fn)) return false;//如果同一个事件注册了同一个函数，则返回false


        }
        //从第二次开始我们用事件计数器来存储
        obj.events[type][addEvent.ID++] = fn;
        //执行事件处理函数
        obj['on' + type] =addEvent.exec;


    }
}
//为每个事件分配一个计数器
addEvent.ID = 1;
//执行事件处理函数
addEvent.exec=function(event)
{
    var e = event || addEvent.fixEvent(window.event);//重新写ie的event处理，用于标注化IE的事件对象
    var es=this.events[e.type];
    for (var i in es) {
        es[i].call(this,e);//把this和e传递进去，这样就能获取到this.value和e.clientX了
    }
};
//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
    for (var i in es) {
        if (es[i] == fn) return true;
    }
    return false;
};
//把IE常用的Event对象匹配到W3C中
addEvent.fixEvent=function(event)
{
    event.preventDefault=addEvent.fixEvent.preventDefault;//重写IE的preventDefault
    event.stopPropagation=addEvent.fixEvent.stopPropagation;//重写IE的stopPropagation
    return event;
};
//IE阻止默认行为
addEvent.fixEvent.preventDefault=function()
{
    this.returnValue=false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation=function()
{
    this.cancelBubble=true;
};


//跨浏览器移出事件
function removeEvent(obj,type,fn)
{
    if(typeof obj.removeEventListener!="undefined")
    {
        obj.removeEventListener(type,fn,false);
    }
    else
    {
        for(var i in obj.events[type])//addEvent的时候已经给obj添加了events
        {
            if(obj.events[type][i]==fn)
            {
                delete obj.events[type][i];
            }
        }
    }
}

//demo.js

window.onload = function () {


    var oButton = document.getElementById('button');
    addEvent(oButton, 'click', fn1);
    addEvent(oButton, 'click', fn2);
    addEvent(oButton, 'click', fn3);
    removeEvent(oButton,'click',fn1);
    var a=document.getElementById("a");
    addEvent(a,"click",function(e){
        e.preventDefault();//实现了标准化事件处理
    })


};




function fn1(e) {
    alert('1'+this.value+ e.clientX);
}


function fn2(e) {
    alert('2'+this.value+ e.clientX);
}


function fn3(e) {
    alert('3'+this.value+ e.clientX);
}