web-dev-qa-db-fra.com

Comment ajouter des écouteurs d'événement à un tableau d'objets

J'ai un tableau d'objets (spécifiquement easelJS images) - quelque chose comme ceci:

var imageArray = new Array;
gShape  = new createjs.Shape();
// shape is something
imageArray.Push(gShape);

Ce que je veux faire, c'est avoir un écouteur d'événement au lieu de:

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

Je souhaite que le programme sache précisément quelle région est sélectionnée pour pouvoir envoyer un message d’alerte de la manière suivante:

imageArray[index].addEventListener("click", function(){
    alert " you clicked region number " + index}
javascriptextjsevent-listenereaseljs
12
Ryan Williams

Sûr. Vous pouvez simplement utiliser une fermeture pour enregistrer l'index de cette itération. Sinon, ils sont partagés par la même portée de fonction et vous donneront la valeur de la même itération. La création d'une fonction distincte pour chacun en sauvegardera l'état à l'intérieur de la fonction.

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

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

ou mieux 

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

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

ES6 à la rescousse 

let imageArray = [];
gShape = new createjs.Shape();
// shape is something
imageArray.Push(gShape); // Dumped all the objects

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

L'utilisation du mot clé let crée une portée de bloc pour la variable dans l'itération et aura l'index correct lorsque le gestionnaire d'événements est appelé.

15
Sushanth --

Quelque chose comme ça devrait marcher:

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

Cela fonctionne parce qu'il crée une fermeture qui contient la valeur index qui sera affichée dans le message d'alerte. Chaque fois à travers la boucle crée une autre fermeture contenant une autre valeur de index.

7
Lee Meador

Bien sûr, la solution est la fermeture, mais comme il a Ext chargé, il pourrait tout aussi bien l’utiliser et obtenir du code très lisible. L'index est passé en tant que deuxième argument à Ext.Array.each (alias à Ext.each).

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

C'est ce que j'utilise pour les id div:

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

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

Bonne chance!

0
Alexander Rulezovsky