Question

我显示的图片会在点击html按钮时动态添加。使用addEventListener我想在这些图像上添加一个on click函数，它将访问该对象的另一个属性，以便显示它。

这是我的代码看起来像：

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

        }
    }

目前我正在显示'fruitArray[counter].image.type'（未定义）。

我想知道是否有一种方法可以让图像属性显示'fruitArray[counter].type'，任何帮助都会受到赞赏！

Answer 1

您可以使用bind，例如：

function printFruits() {
    var counter = 0,
        element = document.getElementById("div1"),
        item;

    function onClick() {
        window.alert(this.type);
    }

    for (counter = 0; counter < 3; counter++) {
        item = fruitArray[counter];

        item.image.addEventListener("click", onClick.bind(item));
        element.appendChild(item.image);

    }
}

bind()方法创建一个新函数，当被调用时，它具有它 this关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

Answer 2

您可以将类型存储在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);
}

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

2 个答案: