为JavaScript创建的img元素添加onclick事件及上传时函数自动触发问题

嘿，我看到你的问题了——上传图片时myfunction会自动弹出alert，而不是只有点击图片才触发，对吧？问题出在你绑定点击事件的方式上。

问题根源 #

当你写：

img.onclick = myfunction();

末尾的括号()会让JavaScript立即执行myfunction函数，而不是把它作为点击事件的回调函数保存起来。这就是为什么图片还没被点击，上传时就弹出提示了。

修复方案 #

只需要去掉括号，把函数本身赋值给onclick属性即可，这样只有当图片被点击时才会调用它：

img.onclick = myfunction;

完整修正后的代码 #

function handleFiles() {
    var inputElement = document.getElementById("input"); 
    var fileList = inputElement.files; 
    var NameFile = []; 
    for(var i = 0; i < fileList.length; i++){ 
        NameFile = fileList[i].name; 
        var x = document.createElement("Table"); 
        x.setAttribute("id", "galeria" + (i)); 
        document.body.appendChild(x); 

        // 图片部分
        var Img = document.createElement("tr"); 
        Img.setAttribute("id", "ImgTr" +(i)); 
        document.getElementById("galeria" +(i)).appendChild(Img); 
        var Imgz = document.createElement("td"); 
        var img = document.createElement("img"); 
        img.src = window.URL.createObjectURL(fileList[i]); 
        img.height = 50; 
        img.onload = function(){ 
            window.URL.revokeObjectURL(this.src); 
        } 
        // 修正：去掉括号，绑定函数本身
        img.onclick = myfunction; 
        Imgz.appendChild(img); 
        document.getElementById("ImgTr" + (i)).appendChild(Imgz); 

        // 文件名部分
        var y = document.createElement("tr"); 
        y.setAttribute("id", "Tr" + (i)); 
        document.getElementById("galeria" +(i)).appendChild(y); 
        var z = document.createElement("td"); 
        var t = document.createTextNode(NameFile); 
        z.appendChild(t); 
        document.getElementById("Tr" + (i)).appendChild(z); 
    } 
} 

function myfunction(){ 
    alert("hello"); 
}

额外说明 #

如果之后你需要给myfunction传递参数（比如当前图片的文件名或索引），可以用匿名函数包裹，避免立即执行的问题：

img.onclick = function() {
    // 这里可以传递参数，比如当前文件名
    myfunction(fileList[i].name);
};

不过要注意循环中的闭包问题，如果需要在循环里绑定带参数的回调，最好用IIFE（立即执行函数）或者let声明变量（ES6+）来保存当前循环的i值，避免所有点击都取到最后一个i的值。

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