为动态创建的单元格添加点击功能 table - JavaScript

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;
}

我正在尝试为动态创建的 table 中的每个单元格添加点击功能（我无法知道 table 中有多少个单元格或它们的 ID 是什么但是我只需要单元格中包含的文本）

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

我是 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;
}

我选择了这个解决方案，因为生成 tables 的脚本不是我的，因此我不知道我想要的 table 的 ID 是什么，也不知道有多少table它实际上创建了。

Answer 1

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

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

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);

Answer 2

您几乎肯定不想要向每个 table 单元单独添加一个事件处理程序，如果它们中的所有（甚至许多）都应该做同样的事情点击了。

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

设置委派的方法如下：

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

当然，您可以选择任何您想要的祖先元素，甚至 <body> 如果这是必需的。另请注意，这种做事方式意味着即使在 table 中添加或删除单元格时，您的代码也会按预期运行 - 您只需在页面初始化时执行一次即可。

为动态创建的单元格添加点击功能 table - JavaScript

Adding a click function to cells in a dynamically created table - JavaScript

javascript

dynamically-generated