如何为动态生成的Div单元格网格添加onClick点击事件？

让我来帮你分析一下你尝试的两种方法的问题所在，再给你可行的解决方案：

方法1的问题：div.addEventListener("click", null); #

addEventListener的第二个参数必须是一个函数引用，null是完全无效的。你需要把null替换成你实际要执行的点击处理函数——可以是你定义的OnClick函数，或者一个匿名函数。

方法2的问题：div.getElementById(div.id).onclick = function() { OnClick() }; #

getElementById是document对象的专属方法，DOM元素（比如这里的div）并没有这个方法。而且你已经直接拿到了div这个元素对象，完全不需要再通过ID去查找它，直接给div.onclick赋值即可。

正确的实现方案 #

方案1：使用addEventListener绑定事件 #

直接给动态生成的div绑定点击事件，注意处理循环变量的作用域问题（如果用var声明循环变量，会导致所有点击事件拿到最后一次循环的i和j值，推荐用let声明）：

var table, row, div; 
table = document.createElement('table'); 
// 用let声明i，形成块级作用域
for (let i=0; i < rows; i++) { 
    row = document.createElement('td'); 
    row.id = "row-" + i; 
    // 用let声明j
    for (let j=0; j < cols; j++) { 
        div = document.createElement('div'); 
        div.id = cellID(i, j); 
        // 绑定点击事件，这里可以直接调用你的OnClick函数，还能传递单元格坐标
        div.addEventListener("click", function() {
            console.log(`点击了单元格：(${i}, ${j})`);
            OnClick(i, j); // 假设你的OnClick函数需要接收坐标参数
        });
        row.append(div); 
    } 
    table.append(row); 
}

方案2：直接设置onclick属性 #

和上面的逻辑类似，直接给div.onclick赋值一个函数：

var table, row, div; 
table = document.createElement('table'); 
for (let i=0; i < rows; i++) { 
    row = document.createElement('td'); 
    row.id = "row-" + i; 
    for (let j=0; j < cols; j++) { 
        div = document.createElement('div'); 
        div.id = cellID(i, j); 
        div.onclick = function() {
            OnClick(i, j);
        };
        row.append(div); 
    } 
    table.append(row); 
}

额外提示：循环变量的陷阱 #

如果你坚持用var声明i和j（不推荐），需要用闭包来保存每次循环的i和j值，否则所有点击事件都会使用循环结束后的i和j：

for (var i=0; i < rows; i++) { 
    row = document.createElement('td'); 
    row.id = "row-" + i; 
    for (var j=0; j < cols; j++) { 
        // 用立即执行函数保存当前的i和j
        (function(currentI, currentJ) {
            div = document.createElement('div'); 
            div.id = cellID(currentI, currentJ); 
            div.addEventListener("click", function() {
                OnClick(currentI, currentJ);
            });
            row.append(div); 
        })(i, j);
    } 
    table.append(row); 
}

内容的提问来源于stack exchange，提问作者VoodooJazz_