javascript - 事件绑定代码

Question

<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]);
        }
    }
    
};

Answer 1

1. 管理注册的时间监听函数，防止重复添加及有效remove

2. 如果obj['bind'+event]为空，说明之前没有注册过任何事件监听，obj['bind'+event]={}，obj['bind'+event]如果不会空，自己赋给自己

3. obj['bind'+event]指向一个对象(初始为{}),'bind'+fn 为对象上的一个属性，动态添加
   obj'bind'+event的目的是将事件注册维护起来，在removeEvent会使用到

4. 如果相同的参数的addEvent方法被调用多次的情况下，防止事件回调被注册多次