Question

我正在尝试通过执行类似的操作向具有相同类的元素添加事件侦听器...

// Add listener's to all elements that have a class name of "foo"
var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
    var fooId = foos[i].id;
    foos[i].addEventListener('click', function(){doFoo(fooId)});
}

function doFoo(id) {
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + id + "</li>";
}

除了匿名函数参数＆＃34; fooId＆＃34;之外，上述JavaScript的工作原理不同。将始终计算为集合的最后一个元素的id - 而不是循环范围中项目的id。

如何将元素id的id传递给匿名函数参数？

在这个小提琴http://jsfiddle.net/6e4NC/中，您会看到无论您点击哪个Div，JavaScript都会声称您点击了最后一个Div。

Answer 1

function doFoo(id) {
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + id + "</li>";
}

var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
    foos[i].addEventListener('click', function (e) {
        doFoo(e.target.id);
    });
}

事件有目标，利用它 http://jsfiddle.net/6e4NC/3/

Answer 2

var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
   var fooId = foos[i].id;
   var f = function (fooId) {
       return function (){doFoo(fooId)};
    }(foos[i].id);
    foos[i].addEventListener('click', f);
}

Example

Answer 3

for (i = 0; i < foos.length; i++) {
    var fooId = foos[i].id;
    foos[i].addEventListener('click', function (e, args) {
        doFoo(e);
});

function doFoo(e) {
    var fooId = e.target.id || e.srcElement.id;
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + fooId + "</li>";
}

如何将Element的ID传递给匿名函数？

3 个答案: