Javascript 新创建元素的js onclick

嗨，我正在尝试为我的项目创建一个简单的颜色选择器。它应该显示DIV vith colored span，并且每个span都应该用onwn值单击call my function-pickColor（）

问题是，在点击任何跨度后，我的函数只是用数组中的最后一个walue调用，而不是用相应的walue调用。你知道怎么纠正吗

这是我的密码

var colors = [ "303030", "777777", "da0025", "f01800", "ff4300", "fd6c05", "feab07", "ffc91e", "93c900", "54c300", "00ab62", "00c3c4", "009bf0", "006afe", "3f00dd", "9025ff", "ff3ec2", "fe0b6b"];

//颜色选择器 var选择器

function createPicker(){
//create picker wrapper
picker = document.createElement('div');
picker.id = "colorPicker";
picker.style.display = "none"; // initialy invisible !
picker.style.margin = "0";
picker.style.padding = "0.5em";
picker.style.backgroundColor = "rgb(30,30,30)";
//create picker color options
var newColor;
for (var i = colors.length - 1; i >= 0; i--) {
    newColor = document.createElement('span');
    newColor.id = colors[i];
    //set style for color option
    newColor.style.display = "inline-block";
    newColor.style.width = "50px";
    newColor.style.height = "50px";
    newColor.style.margin = "0";
    newColor.style.padding = "0";
    newColor.style.backgroundColor = "#"+colors[i];
    //add onclick function

    newColor.addEventListener("click", function f(){pickColor( colors[i] )}, true);

    //append option
    picker.appendChild(newColor);
};
//append colorPicker to file
document.getElementById('here').appendChild(picker); // value must be set to the parent elements id !
}

function displayPicker(){
picker.style.display = "inline-block";
}

function pickColor(id){
//set value
console.log(id);
var input = document.getElementById('color'); // must be the 'input' elements id that we want to set !
//console.log(input);
input.value = id;
// hide picker
picker.style.display = "none";
}

---

在查看了Teemu的推荐链接（谢谢）后，我意识到如果在循环中使用

addEventListener

方法调用中的

function

，会变得非常棘手

那么，在没有任何参数的情况下，这样做如何：

newColor.addEventListener("click", pickColor, true);

在pickColor功能中，您可以通过以下方式访问

id

：

function pickColor(){

   var id = this.id;
   //more code below

}

---

闭包很好，虽然有时有点混乱。下面是一个问题（我希望）已经解决的例子，下面是使之成为可能的js代码：

newColor.addEventListener("click", (function (param) {
            return function() {
                pickColor(colors[param]);
            };
        })(i), true);

问题是，由于闭包，i值为-1。你必须将i的实际值传递给函数，多亏了闭包，才能在最终返回并用于事件的函数中使用它

更新

更好的方法：在代码中的某个地方定义函数：

function clickEvHandlerClosure(param) {
    return function () {
        pickColor(colors[param]);
    };
}

然后：

newColor.addEventListener("click", clickEvHandlerClosure(i), true);

---

希望有帮助。

这不会通过JSLint（“不要在循环中创建函数”），但它可以完成任务。@Teemu he，他很好。。。一开始没有人要求这样做。其次，我真诚地怀疑在stackoverflow中看到的大多数js脚本是否会通过JSLint。谢谢你，这帮了我很大的忙，也许他们不会。但是在循环中创建函数是不好的做法，它会增加内存和CPU时间消耗。这里的IIFE可以很容易地用预先声明的函数替换。当然更好，+1；）。但是这个例子中的“this”是什么？@joasisk非常好的问题：-）这里引用一句话作为答案：“在JavaScript中，这总是指我们正在执行的函数的“所有者”，或者更确切地说，指函数是其方法的对象……”。。。不过，onclick属性属于它所属的HTML元素。来源：谢谢，这非常有用，因为我是一个新手，我正在通过这样做来学习。这肯定会对我的工作有很大帮助future@joasisk我很高兴我能提供一些帮助：-）我记得当我第一次做类似的事件处理时，我发现这真的很棘手，花了几个小时试图弄清楚动态创建的元素和它们的事件处理发生了什么。无论如何，您在JavaScript方面做得很好，进展也非常顺利！