为什么我不能向引用Itself的集合中的每个元素添加事件,而不是"for(){}"语句中的最后一个元素

Question

上Window的负荷,每一个DD元素中Quote_App应该有一个onCLick触发功能追加事件Lorem,然而,Lorem返回nodeName并Id在最后一个元素的For声明,而不是该触发功能的元素.我想要Lorem返回触发该函数的元素nodeName和Id.

function Lorem(Control){

/*     this.Control=Control; */
    this.Amet=function(){
        return Control.nodeName+"\n"+Control.id;
    };

};

function Event(Mode,Function,Event,Element,Capture_or_Bubble){
    if(Mode.toLowerCase()!="remove"){
        if(Element.addEventListener){
            if(!Capture_or_Bubble){
                Capture_or_Bubble=false;
            }else{
                if(Capture_or_Bubble.toLowerCase()!="true"){
                    Capture_or_Bubble=false;
                }else{
                    Capture_or_Bubble=true;
                };
            };
            Element.addEventListener(Event,Function,Capture_or_Bubble);
        }else{
            Element.attachEvent("on"+Event,Function);
        };
    };
};

function Controls(){
    var Controls=document.getElementById("Quote_App").getElementsByTagName("dd");
    for(var i=0;i<Controls.length;i++){

        var Control=Controls[i];

        Event("add",function(){

            var lorem=new Lorem(Control);
            lorem.Control=Control;
            alert(lorem.Amet());

        },"click",Controls[i]);

    };
};

Event("add",Controls,"load",window);

目前你点击任何DD元素Lorem总是返回nodeName和Id最后的DD元素.

Lorem应该返回触发的()的nodeName和.IdControlControl[i]Lorem

我该如何实现这一目标？

谢谢!

Answer 1

你需要在循环中使用一个闭包来附加事件处理程序以捕获i每个循环迭代中的值.

  for(var i=0;i<Controls.length;i++) {   
    (function() {
        var Control=Controls[i];

        Event("add",function(){

            var lorem=new Lorem(Control);
            lorem.Control=Control;
            alert(lorem.Amet());

         },"click",Controls[i]);
    })();
  };

在这里,我使用JavaScript的好朋友,自我调用的匿名函数创建了一个闭包.

需要闭包的原因是没有它,i任何事件处理函数执行点的值将是i最后一次循环迭代的值,而不是我们想要的值.我们想要i在每个循环迭代中的值,在我们声明每个事件处理函数的时刻,因此我们需要在每次迭代中捕获该值.使用匿名函数,该函数在声明后立即执行,是捕获所需值的良好机制.

另一点,稍微偏离主题,但它可能会帮助你,是每个浏览器(嗯,IE)不支持事件捕获,但事件冒泡是.这有效地使useCapture布尔标志addEventListener对于开发跨浏览器Web应用程序毫无用处.因此,我建议不要使用它.

还有一件事,JavaScript通常使用驼峰套管来表示函数名和变量名.Pascal大小写通常仅用于构造函数(创建对象的函数).