Question

我正在尝试将参数传递给我的事件处理程序。绑定发生在循环中，所以我注意在闭包内添加参数。但是参数不会传递给事件处理程序:(

我的简化示例尝试将click事件添加到每个列表项。单击列表项的序号应该在对话框中。序数源于循环。

HTML

<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>last</li>
</ol>

JS

var listItems = document.getElementsByTagName('li');

// Generic function to bind event to handler
bindEvent = function(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        element.attachEvent('on'+type, handler);
    }
};

sayOrdinal = function(ev, i) {
    // i is undefined :(
    alert(i);
    // this works though....
    // alert(ev.target.textContent);
}

for (var i = 0; i < listItems.length; i++){
    bindEvent(listItems[i], 'click', function(i){sayOrdinal(i)});
}

以下代码在接受答案的帮助下得到纠正。

var listItems = document.getElementsByTagName('li');

// Generic function to bind event to handler
bindEvent = function(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        element.attachEvent('on'+type, handler);
    }
};

sayOrdinal = function(i) {
    // Now it works :)
    alert(i);
}

for (var i = 0; i < listItems.length; i++){
    bindEvent(listItems[i], 'click', (function(i) {
    return function(ev) {
        sayOrdinal(i);
        }
    }(i)));
}

Answer 1

您可以使用以i作为参数的IIFE（立即调用的函数表达式）。这使得它可以在该函数范围内的任何内容中使用。因此，使用IIFE返回引用i的函数。在这里，它最终表现得像一个闭包，因为它在词汇上绑定到封闭的IIFE的范围。

for (var i = 0; i < listItems.length; i++){
    bindEvent(listItems[i], 'click', (function(i) {
        return function(ev) {
            alert(i);
        }
    }(i)));
}

Updated fiddle

从闭包将参数传递给eventhandler

1 个答案: