Question

var tableData = document.getElementsByTagName("td");

for(var i = 0; i < tableData.length; i++){
    var x = tableData[i];
    x.addEventListener("click", fun1(x.textContent));
}
function fun1(y){
    document.getElementById("testB").textContent = y;
}

我正在尝试向动态创建的表中的每个单元格添加一个click函数（我无法知道表中有多少个单元格或者它们的id是什么，但我只需要单元格中包含的文本）

我想更新一个包含单元格内容的按钮，现在它不会在点击时更新，而是将按钮更新为表格的最后一个值。

我是JavaScript的新手，非常感谢您提供的任何帮助。

这是我使用的解决方案，感谢下面提供的答案

var tables = document.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++){
    tables[i].addEventListener("click",
    function(e) {
        if(e.target && e.target.nodeName == "TD") {
            fun1(e.target.textContent);
        }
     }
);
}
function fun1(y){
    document.getElementById("testB").textContent = y;
}

我使用这个解决方案，因为生成表的脚本不是我的，因此我不知道我想要的表的id是什么，并且不知道它实际创建了多少个表。

Answer 1

你几乎肯定会不想要为每个表格单元格单独添加一个事件处理程序，如果它们中的所有（甚至很多）单击时都应该做同样的事情。

DOM事件模型旨在支持delegation，在这种情况下，这是一个更好的解决方案。简而言之：单个单元格不响应点击，但是一些被视为永久固定的祖先元素（例如，它们所在的<table>）会检测单元格上的点击并对其进行适当的响应。

以下是如何设置委派：

document.getElementById("#mytable").addEventListener("click",
    function(e) {
        if(e.target && e.target.nodeName == "TD") {
            fun1(e.target.textContent);
        }
     }
);

当然，您可以选择所需的任何祖先元素，即使<body>，如果需要，也可以选择。另请注意，这种处理方式意味着即使在将表格添加到表格中或从表格中删除单元格时，代码也会按预期运行 - 您只需在页面初始化时执行此操作。

Answer 2

x.addEventListener("click", fun1(x.textContent));

这一行是你的问题 - addEventListener查找函数引用，你只是调用函数（它不返回函数）。将其包装在匿名函数中，或将值绑定到引用。

x.addEventListener("click", function() { 
    fun1(x.textContent)
}, false); //also a good idea to add the event bubbling boolean param

或者，ES6箭头语法：

x.addEventListener("click", () => fun1(x.textContent), false);

将click函数添加到动态创建的表中的单元格 - JavaScript

2 个答案: