将参数从闭包传递给事件处理程序

Question

我正在尝试将参数传递给我的事件处理程序。绑定发生在一个循环内，所以我注意在闭包内添加参数。虽然参数没有传递给事件处理程序:(

jsfiddle 是 right here。

我的简化示例尝试向每个列表项添加一个点击事件。单击列表项的序号应该在对话框中。序号来自循环。

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 来 return 引用 i 的函数。在这里，它最终表现得像一个闭包，因为它在词法上绑定到封闭的 IIFE 的范围。

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

Updated fiddle

将参数从闭包传递给事件处理程序

Pass parameter to eventhandler from a closure

javascript

events

closures