javascript - 如何将事件侦听器添加到对象数组

Question

我有一组对象（特别是easelJS图像） - 像这样：

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

我想要做的是有一个事件监听器，而不是：

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

我希望程序具体知道单击了哪个区域，以便我可以通过以下方式发送警报框：

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

Answer 1

当然。您可以只使用闭包来保存该迭代的索引。否则有由相同的函数范围共享，并且会给你相同迭代的值。为每个函数创建一个单独的函数将保存函数内部的状态。

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

或更好

 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 来救援

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

使用let关键字为迭代中的变量创建一个块作用域，并在调用事件处理程序时具有正确的索引。

Answer 2

像这样的东西应该工作：

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

它起作用的原因是因为它创建了一个闭包，该闭包包含index将显示在警报消息中的值。每次循环都会创建另一个闭包，其中包含另一个值index。

Answer 3

//gShape must be an array of HTMLElement
gShape.forEach(element => element.addEventListener("click", function () {
    // this, refers to the current element.
    alert ("You clicked region number: " + this.getAttribute('data-region'));
}));

Answer 4

当然，解决方案是闭包，但既然他已经加载了 Ext，他不妨使用它并获得一些非常易读的代码。索引作为第二个参数传递给Ext.Array.each（别名为Ext.each）。

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

Answer 5

这是我用于divid 的：

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

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

祝你好运！

Answer 6

一种简单的方法是在所有元素上调用 a并使用循环来迭代并在单击元素触发querySelectorAll()时使用该特定数组索引的数据执行函数。EventListener

片段

检索被点击元素的 id 属性

document.querySelectorAll('li').forEach(element => {
  element.addEventListener('click', () => {              
    console.log(element.getAttribute('id'))
  })
})

li{cursor:pointer}

<ul>
  <li id="id-one">One</li>
  <li id="id-two">Two</li>
  <li id="id-three">Three</li>
  <li id="id-four">Four</li>
</ul>