javascript 事件似乎混淆了

Question

我正在开发一个项目，我为该项目编写了一个快速而肮脏的 dom 操作框架......或者函数:

var $ = function(e, properties){
    var elem = document.getElementById(e) || false;

    if(!elem && properties){
        elem = document.createElement('div');
        elem.id = e;

        for(i in properties){
            switch(i){
                case 'parent':
                    properties.parent.appendChild(elem);
                break;

                case 'events': 
                    for(j in properties.events){
                        elem.addEventListener(j, function(e){
                            e.preventDefault();
                            properties.events[j](e, elem);
                        });
                    }
                break; 

                default : 
                    elem[i] = properties[i];
                break; 
            }
        }
    }
    return elem;
};

只要我在整个项目中使用一个事件监听器，一切似乎都工作正常，但是，当我添加另一个元素时，事件会混合在一起，我会收到一个应该发出 contextmenu 事件的单击事件，事情只是变得一团糟。它似乎想调用错误的函数。

问题演示:fiddle

Answer 1

变量“i”和“j”是全局。它们应该在函数中用 var 声明:

var i, j;

但是，这并不能解决问题。在您创建的事件监听器函数内，仍然存在对“j”的引用，并且这仍然是每个处理程序对同一变量的引用。一个变量一次只能有一个值，该值将是分配最后一个处理程序时“j”的值。

您需要添加另一层函数调用，以便为每个处理程序创建唯一的范围:

                    elem.addEventListener(j, function(jCopy) {
                        return function(e){
                          e.preventDefault();
                          properties.events[jCopy](e, elem);
                        };
                    }(j));

还有其他方法可以实现相同的目标，但它们或多或少都是相同的想法。 Stackoverflow 上有无数相关问题。