<p id="p1">aaaaaaaa</p>
<p id="p2">bbbbbbbb</p>
//这是看别人的代码有些疑惑下面addEvent方法里的代码
window.onload = function(){
    var op = document.getElementById('p1');
    var op2 = document.getElementById('p2');
    //下面这里有个匿名函数，会导致下面函数高用alert(this)时指向window而不是dom元素，
    //所以把它改成下面有函数名的代码
    /*op.attachEvent('onclick',function(){
        change.call(op);
    });
    
    op2.onclick = function(){
        op.detachEvent('onclick',change);
    };*/
    
    function change(){
        alert(this);
    }
    
    addEvent(op,'click',change);
    
    op2.onclick = function(){
        removeEvent(op,'click',change);
    };
    
    function addEvent(obj,event,fn){
        //1、下面这两行是什么意思他把event和回调fn当成属性放到obj下起什么作用
        //2、||左边在什么情况下会不成立,感觉调用了addEvent函数加了事件左边的都能成立吧，写后面有什么意义
        obj['bind'+event] = obj['bind'+event] || {};
        //3、obj['bind'+event]['bind'+fn]有这样的属性吗是怎么表现出来的
        //4、||左边不成立就走右边的，可是右边的不还是一个匿名函数那个上面注释区里的代码有什么区别
        obj['bind'+event]['bind'+fn] = obj['bind'+event]['bind'+fn] || function(){
            fn.call(obj);
    }
        
        obj.attachEvent('on'+event,obj['bind'+event]['bind'+fn]);
        
    }
    function removeEvent(obj,event,fn){
        if( obj['bind'+event] &&  obj['bind'+event]['bind'+fn]){
            obj.detachEvent('on'+event , obj['bind'+event]['bind'+fn]);
        }
    }
    
};