Question

我正在动态创建list标签中的元素，我想为列表中的所有元素添加不同的事件处理程序。我怎样才能做到这一点？

var menuLinks = document.getElementsByClassName('test');
    for(var j = 0; j < menuLinks.length; j++)
    {
        var menuLink = menuLinks[j];
        menuLink.onclick = function(e) {
            e.preventDefault();
            console.log(menuLink.innerHTML);
        };
    }

我在类名测试中添加了元素，但无论哪个元素我点击它总是给我最后一个元素。

Answer 1

你的问题是你在循环中创建了一个闭包。有关说明和通用解决方案，请参阅JavaScript closure inside loops – simple practical example。

简而言之：JavaScript没有块范围。由于只有一个menuLink变量，因此每个处理程序都引用该变量。变量当然只能有一个值，即在上一次迭代中设置的值。

但是，在您的情况下，有一个更简单的解决方案：您可以在事件处理程序中使用this来引用该元素。您不需要依赖循环变量：

menuLinks[j].onclick = function(e) {
  e.preventDefault();
  console.log(this.innerHTML);
};

Learn more about this in event handlers

Answer 2

试试这个，

var menuLinks = document.getElementsByClassName('test');
        for(var j = 0; j < menuLinks.length; j++)
        {
            var menuLink = menuLinks[j];
            menuLink.onclick = function(e) {
                e.preventDefault();
                console.log(e.target.innerHTML);
            };
        }

添加一个具有不同参数的处理程序

2 个答案: