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

ql3eal8s  于 2022-11-04  发布在  其他
关注(0)|答案(6)|浏览(176)

我有一个对象数组(特别是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}
iyr7buue

iyr7buue1#

当然可以。你可以用闭包来保存迭代的索引。否则,它们被相同的函数作用域共享,并将给予你相同迭代的值。为每个函数创建一个单独的函数,将保存该函数内部的状态。

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关键字可以在迭代中为变量创建块作用域,并且在调用事件处理程序时将具有正确的索引。

6fe3ivhb

6fe3ivhb2#

应该可以这样做:

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

它之所以有效,是因为它创建了一个闭包,其中保存了将在警报消息中显示的index的值。每次循环都创建另一个闭包,保存另一个index的值。

ncecgwcz

ncecgwcz3#

//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'));
}));
k4aesqcs

k4aesqcs4#

当然,闭包是解决方案,但既然他已经加载了Ext,他也可以使用它并得到一些可读性很强的代码。索引作为第二个参数传递给Ext.Array.each(别名为Ext.each)。

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

o2g1uqev5#

这是我在div id中使用的代码:

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

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

祝您好运!

k3fezbri

k3fezbri6#

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

代码段

正在检索单击的元素的id属性
第一个

相关问题