获取Javascript中关联数组的数组索引

Question

所以我有一个“关联数组”的数组，即。对象，保持各种HTML元素的数据和一个其它参数，如下所示：

container[0] = { picker_canvas: document.getElementById("background_picker"), 
       color_canvas: document.getElementById("background_color"), 
       hex_text: document.getElementById("background_text"), 
       mouse_down: false }; 

container[1] = { picker_canvas: document.getElementById("textbox_picker"), 
       color_canvas: document.getElementById("textbox_color"), 
       hex_text: document.getElementById("textbox_text"), 
       mouse_down: false }; 

container[2] = { picker_canvas: document.getElementById("font_picker"), 
       color_canvas: document.getElementById("font_color"), 
       hex_text: document.getElementById("font_text"), 
       mouse_down: false }; 

每个容器有一个颜色选择器画布，颜色预览帆布，显示的十六进制颜色值的文本框的引用，并一个mouse_down布尔值。后来我通过这样的容器迭代初始化几个事件侦听器：

for (i=0; i<3; i++) { 

    container[i].picker_canvas.addEventListener("mousedown", function() { 
     container[i].mouse_down = true; 
    }, false); 

    container[i].picker_canvas.addEventListener("mouseup", function() { 
     container[i].mouse_down = false; 
    }, false); 

    container[i].picker_canvas.addEventListener("mousemove", function(evt) { 
     getColor(container[i], evt); 
    }, false); 

    container[i].hex_text.addEventListener("change", function(evt) { 
     drawColorSquare(container[i], evt.target.value) 
    }, false); 

} 

但是，这并不工作，因为我是不确定的，所以现在我正在试图做这样的事情，以获得正确的索引，但我不知道如何真正实现它在JavaScript

container[i].picker_canvas.addEventListener("mousedown", function(evt) { 
    container[container.indexof(evt.target)].mouse_down = false; 
}, false); 

基本上我需要搜索evt.target关联数组的数组，并使其返回数组的索引。所以，这甚至可能与任何内置的JavaScript函数或将我只需要自己做？

Answer 1

因为它似乎你不必担心Internet Explorer 8和更早版本，使用forEach：

container.forEach(function(x) { 
    x.picker_canvas.addEventListener("mousedown", function() { 
     x.mouse_down = true; 
    }, false); 

    x.picker_canvas.addEventListener("mouseup", function() { 
     x.mouse_down = false; 
    }, false); 

    x.picker_canvas.addEventListener("mousemove", function(evt) { 
     getColor(x, evt); 
    }, false); 

    x.hex_text.addEventListener("change", function(evt) { 
     drawColorSquare(x, evt.target.value) 
    }, false); 
}); 

Answer 2

因为我们没有在这里支持IE8，我们可以全力以赴：

container.forEach(function(x) { 
    x.handleEvent = function(e) { //This is stupid, wish I had the time to refactor the code to use prototypes 
     switch (e.type) { 
     case "mousedown": 
      this.mouse_down = true; 
      break; 
     case "mouseup": 
      this.mouse_down = false; 
      break; 
     case "mousemove": 
      getColor(this, e); 
      break; 
     case "change": 
      drawColorSquare(this, e.currentTarget.value); 
      break; 
     } 
    }; 
    var canvas = x.picker_canvas; 
    canvas.addEventListener("mousedown", x, false); 
    canvas.addEventListener("mouseup", x, false); 
    canvas.addEventListener("mousemove", x, false); 
    x.hex_text.addEventListener("change", x, false); 
});