如何为JavaScript动态创建的img元素添加onclick属性并实现点击交互

让我们一步步拆解你的代码，找出潜在问题并给出优化后的实现：

一、现有代码的核心问题 #

1. handleFiles 函数的错误点 #

• 函数声明语法错误：Function 应该小写为 function，JavaScript 是大小写敏感的
• 重复创建表格行：你在代码里重复写了创建 <tr> 元素的逻辑，会生成冗余DOM节点
• 属性拼写错误：image.with = 50 里的 with 应该是 width
• className 设置方式不规范：用 setAttribute("className", "bordered") 不如直接赋值 image.className = "bordered"，后者兼容性更好
• 冗余的占位图设置：你先设置了占位图 src，随后又用 window.URL.createObjectURL 覆盖了它，这行代码可以直接移除
• DOM 选择器风险：document.getElementById("galeria" +(i)) 依赖页面上存在 galeria0、galeria1 这类按索引编号的元素，若不存在会直接抛出错误

2. imgClick 函数的问题 #

• 低效的文件名匹配逻辑：通过遍历整个 NameFile 数组匹配图片ID，当文件数量多时会影响性能
• 冗余的字符串拼接："imageID"+[i] 写法冗余，应该直接写 "imageID" + i（虽然实际结果正确，但不够规范）

二、修正后的完整实现 #

1. 优化后的 handleFiles 函数 #

var NameFile = []; // 存储文件名的数组
function handleFiles() {
    var inputElement = document.getElementById("input");
    var fileList = inputElement.files;
    for(var i = 0; i < fileList.length; i++){
        var fileName = fileList[i].name;
        NameFile.push(fileName);
        
        // 获取目标表格容器（确保页面上存在对应id的元素）
        // 若你需要往多个编号容器添加，可改回document.getElementById("galeria" + i)
        var galeria = document.getElementById("galeria");
        if (!galeria) continue; // 避免容器不存在时报错

        // 创建表格行
        var imgRow = document.createElement("tr");
        imgRow.setAttribute("id", "ImgTr" + i);
        galeria.appendChild(imgRow);

        // 创建图片单元格
        var imgCell = document.createElement("td");
        imgRow.appendChild(imgCell);

        // 创建图片元素
        var image = document.createElement("img");
        image.id = "imageID" + i;
        image.className = "bordered";
        image.src = window.URL.createObjectURL(fileList[i]);
        image.height = 50;
        image.width = 50;
        image.onclick = function() {
            imgClick(this);
        };
        // 用dataset存储文件名，后续点击直接获取，无需遍历数组
        image.dataset.fileName = fileName;

        // 图片加载完成后释放URL对象
        image.onload = function(){
            window.URL.revokeObjectURL(this.src);
        }

        imgCell.appendChild(image);
    }
}

2. 简化后的 imgClick 函数 #

function imgClick(img) {
    // 用classList.toggle快速切换边框类，比字符串替换更简洁可靠
    img.classList.toggle('bordered');
    // 直接从dataset获取文件名，无需遍历数组
    alert(img.dataset.fileName);
}

三、验证说明 #

修正后的代码可以完美实现你需要的功能：

• 上传图片后，会在目标表格中生成包含图片的行，并关联对应文件名
• 点击图片时，会自动切换bordered类的显示（实现边框样式开关）
• 点击同时会弹出当前图片对应的文件名

如果你的场景确实需要往多个编号的galeria容器中添加内容，只需要把代码里的document.getElementById("galeria")改回document.getElementById("galeria" + i)，同时确保页面上存在这些编号的容器元素即可。

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