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

只要我在整个项目中使用一个事件监听器，一切似乎都工作正常，但是，当我添加另一个元素时事件变得混乱，我得到一个click事件应该发出一个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上有很多相关的问题。

javascript事件似乎搞得一团糟

1 个答案: