Question

如何将对象（它是按钮数组的一部分）设置为addEventListener函数中的参数？ buttons [i]不工作..

以下是代码的一部分：

var buttonNames = ["canteen","locations","floorplan","guestbook","pictures"];
    var buttonDivNames = ["btn1","btn2","btn3","btn4","btn5"];
    var buttons = [];

    window.onload = function() {

        for(var i = 0; i<buttonNames.length; i++) {
            var obj = new Object();
            obj.targetLink = buttonNames[i] + ".html";
            obj.defaultImage = "img/buttons/"+buttonNames[i]+"_default.jpg";
            obj.hoverImage = "img/buttons/"+buttonNames[i]+"_hover.jpg";
            obj.div = document.getElementById(buttonDivNames[i]);
            obj.divPicture = obj.div.getElementsByClassName("thumbnailPicture")[0];
            obj.divLink = obj.div.getElementsByClassName("thumbnailLink")[0];
            buttons.push(obj);
        }

        for(var i = 0; i<buttons.length; i++) {
            buttons[i].divPicture.addEventListener("mouseover",function() { anotherFunction(buttons[i]) },false)
        }

    }

    function anotherFunction(arg) {
        console.log(arg.targetLink);
    }

谢谢大家，这种方式有效：

        for(var i = 0; i<buttons.length; i++) {
            initButton(buttons[i]);
        }

    }

    function initButton(arg) {
        arg.divPicture.addEventListener("mouseover",function() {anotherFunction(arg);},false)
    }

    function anotherFunction(arg) {
        console.log(arg.targetLink);
    }

Answer 1

正如评论部分所指出的，您可以使用IIFE创建一个新范围，该范围包含当前i的值：

for(var i = 0; i<buttons.length; i++) {
    (function (i) {
        buttons[i].divPicture.addEventListener("mouseover",function() { anotherFunction(buttons[i]) },false)
    }(i));
}

或者更好的是，创建一个单独的函数来处理eventlistener的添加：

function addEventlistenerToButton(button) {
    button.divPicture.addEventListener("mouseover",function() { anotherFunction(button) },false)
}

// ....
for(var i = 0; i<buttons.length; i++) {
    addEventlistenerToButton(buttons[i]);
}

除此之外，您还可以省略将按钮完全发送到eventlistener并直接从事件对象中获取按钮：

for(var i = 0; i<buttons.length; i++) {
    buttons[i].divPicture.addEventListener("mouseover", anotherFunction, false);
}

function anotherFunction(ev) {
    ev = ev || window.event;
    var src = ev.target || ev.srcElement;

    console.log(src.parentNode);
}

JavaScript：如何将父对象设置为addEventListener函数中的参数？

1 个答案: