这两个addEvent函数有什么区别？

Question

这是第一个：

function addEvent(el, type, fn){
    if(el.addEventListener){
        el.addEventListener(type, fn, false);
    }else{
        el[fn] = function(){
            fn.call(el, window.event);
        }
        el.attachEvent('on'+type, el[fn]);
    }
}

第二个：

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

第二个只是添加前缀，它的作用是什么？

Answer 1

在我看来，这两个函数都试图做相同的事情：以一种在浏览器之间一致的方式绑定事件处理程序（即，不支持.addEventListener()旧版IE版本）。 如果.addEventListener()方法可用，则使用该方法，否则它将创建一个代理函数，以确保使用与this事件对象和事件对象相应的值来调用回调函数。

在创建并稍后引用元素的属性时，区别仅在于el[fn]与el['e' + fn] ：

    el[fn] = function(){
        fn.call(el, window.event);
    }

addEvent()的fn参数必须是一个函数引用，而且我不确定如果将函数引用用作属性名称会发生​​什么，但是我猜想它实质上会对函数执行toString()并使用结果作为属性名称。 所以el['e' + fn]会做同样的事情，只是在开头加上'e' 。 我看不到“ e”有任何特殊含义。