獲取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); 
});