javascript 如何将事件侦听器添加到对象数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17981437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add event listeners to an array of objects
提问by Ryan Williams
I have an array of objects (specifically easelJSimages) - something like this:
我有一组对象（特别是easelJS图像） - 像这样：
var imageArray = new Array;
gShape = new createjs.Shape();
// shape is something
imageArray.push(gShape);
What I want to do is have an event listener instead of:
我想要做的是有一个事件监听器而不是：
gShape.addEventListener("click", function() {alert"stuff"});
I want the program to know specifically which region is clicked so that I can send an alert box in the following way:
我希望程序知道具体点击了哪个区域，以便我可以通过以下方式发送警报框：
imageArray[index].addEventListener("click", function(){
alert " you clicked region number " + index}
回答by Sushanth --
Sure. You can just use a closure to save the index of that iteration. Otherwise there are shared by the same function scope and will give you the value of the same iteration. Creating a separate function for each will save the state of that inside the function.
当然。您可以只使用闭包来保存该迭代的索引。否则有相同的函数作用域共享并且会给你相同迭代的值。为每个函数创建一个单独的函数将保存函数内部的状态。
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);
}
or better
或更好
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 to the rescue
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);
});
}
Using the letkeyword creates a block scoping for the variable in iteration and will have the correct index when the event handler is invoked.
使用let关键字为迭代中的变量创建块作用域，并且在调用事件处理程序时将具有正确的索引。
回答by Lee Meador
Something like this should work:
这样的事情应该工作：
for (var i = 0 ; i < imageArray.length ; ++i) {
function(index) {
imageArray[index].addEventListener("click", function() {
alert ("You clicked region number: " + index");
});
} ( i);
}
The reason it works is because it creates a closure that holds the value of indexthat will be shown in the alert message. Each time through the loop creates another closure holding another value of index.
它工作的原因是因为它创建了一个闭包，其中包含index将在警报消息中显示的值。每次循环都会创建另一个闭包，其中包含 的另一个值index。
回答by rixo
Sure, a closure is the solution, but since he's got Ext loaded he might as well use it and get some very readable code. The index is passed as the second argument to Ext.Array.each(aliased to Ext.each).
当然，闭包是解决方案，但既然他已经加载了 Ext，他不妨使用它并获得一些非常易读的代码。索引作为第二个参数传递给Ext.Array.each（别名为Ext.each）。
Ext.each(imageArray, function(gShape, index) {
gShape.addEventListener("click", function() {
alert("You clicked region number " + index);
});
});
回答by Alexander Rulezovsky
This is what I'm using for divid's:
这是我用于divid 的内容：
var array = ['all', 'what', 'you', 'want'];
function fName () {
for (var i = 0; i < array.length; i++)
document.getElementById(array[i]).addEventListener('click', eventFunction);
};
Good Luck!
祝你好运！
