事件模块的演变

　　上一篇我们封装了一个addEvent：

　　1，解决了IE6/7/8下事件handler中this为window的错误。

　　2，并且统一了事件对象作为事件handler的第一个参数传入。

　　这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了，IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上，add，remove分别添加和删除事件。

E = {
    //添加事件
    add : function(el, type, fn){
        if(el.addEventListener){
            el.addEventListener(type, fn, false);
        }else{
            el['e'+fn] = function(){
                fn.call(el,evt);
            }; 
            el.attachEvent('on' + type, el['e'+fn]);
        }
    },
    //删除事件
    remove : function(el, type, fn){
        if(el.removeEventListener){
            el.removeEventListener(type, fn, false);
        }else if(el.detachEvent){
            el.detachEvent('on' + type, el['e'+fn]);
        }
    }  
};

　　可以看到，标准浏览器如IE9/Firefox/Safari/Chrome/Opera会使用addEventListener/removeEventListener添加/删除事件，IE6/7/8则使用attachEvent/detachEvent。标准浏览器中事件handler是传入的第三个参数fn，IE6/7/8中则是包装后的el["e"+fn]。

　　好了，已经拥有了添加，删除事件两个方法，并且解决了各浏览器下中的部分差异，现再添加一个主动触发事件的方法dispatch。该方法能模拟用户行为，如点击（click）操作等。 标准使用dispatchEvent方法，IE6/7/8则使用fireEvent方法。因为可能会出现异常，使用了try catch。

E = {
    //添加事件
    add : function(el, type, fn){
        if(el.addEventListener){
            el.addEventListener(type, fn, false);
        }else{
            el['e'+fn] = function(){
                fn.call(el,window.event);
            }; 
            el.attachEvent('on' + type, el['e'+fn]);
        }
    },
    //删除事件
    remove : function(el, type, fn){
        if(el.removeEventListener){
            el.removeEventListener(type, fn, false);
        }else if(el.detachEvent){
            el.detachEvent('on' + type, el['e'+fn]);
        }
    },
    //主动触发事件
    dispatch : function(el ,type){
        try{
            if(el.dispatchEvent){
                var evt = document.createEvent('Event');
                evt.initEvent(type,true,true);
                el.dispatchEvent(evt);
            }else if(el.fireEvent){
                el.fireEvent('on'+type);
            }
        }catch(e){};
    }
};