自定义事件

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oSpan = document.getElementById('span1');
    
    bindEvent(oDiv , 'click',function(){
        alert(1);
    });
    
    bindEvent(oDiv , 'click',function(){
        alert(2);
    });
    
    bindEvent(oSpan , 'show',function(){
        alert(3);
    });
    
    bindEvent(oSpan , 'show',function(){
        alert(4);
    });
    
    bindEvent(oSpan , 'hide',function(){
        alert(5);
    });
    
    
    fireEvent(oSpan , 'show');  //3 , 4
    
};

function bindEvent(obj,events,fn){
    //obj : 楼层
    //events : 书架
    //fn : 一本书
    
    obj.listeners = obj.listeners || {};
    obj.listeners[events] = obj.listeners[events] || [];
    
    obj.listeners[events].push( fn );
    
    
    if(obj.addEventListener){
        obj.addEventListener(events,fn,false);
    }
    else{
        obj.attachEvent('on'+events,fn);
    }
}

function fireEvent(obj,events){   //主动触发自定义事件
    
    for(var i=0;i<obj.listeners[events].length;i++){
         obj.listeners[events][i]();
    }
    
}

<div id="div1">div</div>
<span id="span1">span</span>