onChange 事件在选择文件之前触发答案

【问题标题】：onChange event triggers before selecting the fileonChange 事件在选择文件之前触发
【发布时间】：2022-01-03 22:48:37
【问题描述】：

所以我有一个使用 JavaScript 从 JSON 生成的表。表格内有一个文件上传按钮，我需要交换图像（所有图像都在同一个文件夹中，所以我只需要文件名）生成过程是这样的

    ImageClick = document.createElement('input');
    ImageClick.type = "file";
    ImageClick.id = "subida"
    ImageClick.onChange = handleFiles();
    cell.appendChild(ImageClick);

handleFiles 函数

    function handleFiles() {
        const fileList = this.files;
        console.log(fileList[])
}

The result looks like this

所以当表格生成时，handleFiles 函数会立即触发，甚至在选择文件之前，所以我得到了一个

Uncaught TypeError: fileList is undefined

页面加载后。如果我尝试使用

加载文件上传元素

filesElement = document.getElementById('subida')

我尝试控制台记录我得到的 filesElement

Uncaught TypeError: filesElement is null.

我一直在浏览互联网，但找不到答案。我也不能使用jQuery

【问题讨论】：

没有人解释发生这种情况的原因。查看 Image（或任何）元素的 .onchange 属性/属性时，它需要对回调函数的引用。您提供的是调用回调函数的结果 -> handleFiles() - 对回调函数的引用不包括 () - 因此，将该分配更改为：ImageClick.onchange = handleFiles; -您会在您接受的答案中注意到，这就是您的代码和答案代码之间的实际差异。
还要注意，onChange 在你的代码中应该是onchange。（案件很重要）

标签： javascript html json dom dom-events

【解决方案1】：

这也可以：

    ImageClick.addEventListener("change", function(e) {
            const fileList = e.target.files;
            console.log(fileList);
        });

【讨论】：

这工作得很好，我虽然在 addEventListener 上是“onChange”而不是 change