Jak dodać detektory zdarzeń do tablicy obiektów

Question

Mam tablicę obiektów (w szczególności easelJS obrazy) - coś takiego:

Co chcę zrobić, to mieć detektor zdarzeń zamiast:

gShape.addEventListener("click", function() {alert"stuff"}); 

Chcę program wiedzieć konkretnie jakim regionie kliknięciu tak, że mogę wysłać okno alertu w następujący sposób:

imageArray[index].addEventListener("click", function(){ 
    alert " you clicked region number " + index} 

Answer 1

Coś jak to powinno działać:

for (var i = 0 ; i < imageArray.length ; ++i) { 
    function(index) { 
     imageArray[index].addEventListener("click", function() { 
      alert ("You clicked region number: " + index"); 
     }); 
    } (i); 
} 

Powodem działa dlatego, że tworzy zamknięcie, która posiada wartość index który zostanie pokazany w komunikacie ostrzeżenia. Za każdym razem, gdy pętla tworzy kolejne zamknięcie, ma inną wartość: index.

Answer 2

Pewnie. Możesz użyć zamknięcia, aby zapisać indeks tej iteracji. W przeciwnym razie są one dzielone przez ten sam zakres funkcji i dają wartość tej samej iteracji. Utworzenie oddzielnej funkcji dla każdej z nich spowoduje zapisanie stanu tej funkcji wewnątrz funkcji.

var imageArray = new Array; 
gShape = new createjs.Shape(); 
// shape is something 
imageArray.push(gShape); // Dumped all the objects 

for(var i=0; i< immageArray.length; i++) { 
    (function(index) { 
     imageArray[index].addEventListener("click", function() { 
      console.log("you clicked region number " + index); 
     }) 
    })(i); 
} 

lub lepiej

for(var i=0; i< immageArray.length; i++) { 
     imageArray[i].addEventListener("click", bindClick(i)); 
} 

function bindClick(i) { 
    return function(){ 
      console.log("you clicked region number " + i); 
      }; 
} 

Answer 3

Jasne, zamknięcie jest rozwiązanie, ale skoro on ma Ext załadowana mógłby równie dobrze używać go i trochę bardzo czytelny kod. Indeks jest przekazywany jako drugi argument do Ext.Array.each (alias do Ext.each).

Ext.each(imageArray, function(gShape, index) { 
    gShape.addEventListener("click", function() { 
     alert("You clicked region number " + index); 
    }); 
}); 

Answer 4

To co używam do div identyfikatorów:

var array = ['all', 'what', 'you', 'want']; 

function fName() { 
    for (var i = 0; i < array.length; i++) 
    document.getElementById(array[i]).addEventListener('click', eventFunction); 
}; 

Powodzenia!