如何使用addEventListener访问JavaScript对象属性？

我显示的图像将动态添加到点击html按钮。使用

addEventListener

我想给这些图像添加一个点击功能，它将访问对象的另一个属性，以便可以显示它

这就是我的代码的样子：

    var fruit = function(type, cost)
        {
            this.type = type;
            this.cost = cost;
            this.image = new Image();
            this.image.src = "fruits/" +type +".png";                   
        }
    var fruitArray = new Array();

    fruitArray[0] = new fruit("apple", 0.35);
    fruitArray[1] = new fruit("mango", 0.55);
    fruitArray[2] = new fruit("orange", 0.15);

    function printFruits()
    {
        var counter = 0;
        var element = document.getElementById("div1");
        for(counter = 0; counter < 3; counter++)
        {
            fruitArray[counter].image.addEventListener("click", function fruitType() {
                window.alert(this.type);
            });
            element.appendChild(fruitArray[counter].image);

        }
    }

var fruit=功能（类型、成本）
{
this.type=type；
成本=成本；
this.image=新图像（）；
this.image.src=“fruits/”+type+“.png”；
}
var froutarray=新数组（）；
水果阵列[0]=新水果（“苹果”，0.35）；
水果阵列[1]=新水果（“芒果”，0.55）；
水果阵列[2]=新水果（“橙色”，0.15）；
函数printFruits（）
{
var计数器=0；
var元素=document.getElementById（“div1”）；
用于（计数器=0；计数器<3；计数器++）
{
水果数组[counter].image.addEventListener（“单击”，函数水果类型（）{
window.alert（此.type）；
});
元素.appendChild（数组[counter].image）；
}
}

目前我正在显示

“水果数组[counter].image.type”

（未定义）

我想知道是否有一种方法可以取消图像属性的引用，以便显示

“水果数组[计数器]。键入“

”，如有任何帮助，将不胜感激

您可以使用，例如：

函数printFruits（）{ 变量计数器=0， 元素=document.getElementById（“div1”）， 项目； 函数onClick（）{ window.alert（此.type）； } 用于（计数器=0；计数器<3；计数器++）{ item=水果数组[计数器]； item.image.addEventListener（“单击”，onClick.bind（item））； 元素.appendChild（item.image）； } }

bind（）

方法创建一个新函数，该函数在调用时具有

此

关键字设置为提供的值，并具有给定的 调用新函数时，将在任何函数前面提供参数

---

您可以将类型存储在

for

循环中的立即函数中：

for(counter = 0; counter < 2; counter++) {
    (function() {
        var thisType = fruitArray[counter].type
        fruitArray[counter].image.addEventListener("click", function fruitType() {
          console.log(thisType);
        });
    })();
    element.appendChild(fruitArray[counter].image);
} 

for（计数器=0；计数器<2；计数器++）{
（功能（）{
var thisType=froutarray[counter]。类型
水果数组[counter].image.addEventListener（“单击”，函数水果类型（）{
console.log（此类型）；
});
})();
元素.appendChild（数组[counter].image）；
} 

您可以将您的水果实例附加到图像元素上。

for(counter = 0; counter < 2; counter++) {
    (function() {
        var thisType = fruitArray[counter].type
        fruitArray[counter].image.addEventListener("click", function fruitType() {
          console.log(thisType);
        });
    })();
    element.appendChild(fruitArray[counter].image);
}