js事件监听代码

Question

<div id="div1">aaaaaaaa</div>
<div id="div2">bbbbbbbb</div>
//这是看别人的代码有3点疑惑下面addEvent方法里的代码，我用段点去执行了下面的代码
window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    function change(){
        alert(this);
    }
    
    addEvent(oDiv,'click',change);
    
    oDiv2.onclick = function(){
        removeEvent(oDiv,'click',change);
    };
    
    function addEvent(obj,event,fn){
        //1、程序走进这里执行的是obj['bind'+event]
        obj['bind'+event] = obj['bind'+event] || {};
        //2、而程序走到下面这里确执行的是function(){fn.call(obj);}
        //   不应该是执行obj['bind'+event]['bind'+fn]这个吗？
        obj['bind'+event]['bind'+fn] = obj['bind'+event]['bind'+fn] || function(){fn.call(obj);}
        //3、这样写obj['bind'+event]['bind'+fn]是事件吗？
        //   转换过来不是一个复合数组了吗？obj["bindclick","bindchange"];
        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

你需要明白 js 中 || 的含义, 你可以在浏览器调试中实验一下几组 code

var d = 1||'test';
console.log(d); // 1
d = 0||'test'; 
console.log(d); // test

看明白这个之后就能理解这个绑定了
直白的说 || 前面如果是 true 那结果返回的值也就是 true 而如果是 false 就返回的是右边的值
再来看你这绑定

function addEvent(obj,event,fn){
    //1、程序走进这里执行的是obj['bind'+event]
    obj['bind'+event] = obj['bind'+event] || {};
    //2、而程序走到下面这里确执行的是function(){fn.call(obj);}
    //   不应该是执行obj['bind'+event]['bind'+fn]这个吗？
    obj['bind'+event]['bind'+fn] = obj['bind'+event]['bind'+fn] || function(){fn.call(obj);}
    //3、这样写obj['bind'+event]['bind'+fn]是事件吗？
    //   转换过来不是一个复合数组了吗？obj["bindclick","bindchange"];
    obj.attachEvent('on'+event,obj['bind'+event]['bind'+fn]);
}

1 obj['bind'+event] = obj['bind'+event] || {}; 如果 obj['bind'+event] 是 true 那返回的就是 obj['bind'+event] 否则就是 {} 赋值给 obj['bind'+event]
2 和1相同的意思, 不一定必须执行的就是 obj['bind'+event]['bind'+fn]
3 转换过来的并不是一个复合数组, 这也是对象的一种调用方式, 如果 event 是 Click , fn 是 What 相当于调用 obj.bindClick.bindWhat, obj 是个对象, 里面有个 bindClick 这个变量, 这下面又有 bindWhat 这个函数, 把这个函数给 attachEvent 来做 onClick 事件绑定的方法