Uncaught TypeError错误排查：无法读取undefined的files属性

核心错误原因 #

1. 错误使用dataTransfer属性
   在changeEvent函数中，你试图通过event.target.dataTransfer.files[0]获取文件，但dataTransfer是**拖拽类事件（如drop、dragover）**专属的属性，普通文件选择触发的change事件里，event.target就是<input type="file">元素，它自带files属性，不需要通过dataTransfer访问。此时event.target.dataTransfer为undefined，读取它的files自然会抛出Cannot read properties of undefined错误。

2. 冗余的子节点遍历逻辑
   changeEvent绑定在#app元素上，当input触发change事件冒泡到#app时，event.target已经是触发事件的input元素，完全不需要遍历this.childNodes来判断，这部分逻辑不仅多余，还可能引入不必要的判断错误。

3. clickEvent中的节点判断逻辑顺序问题
   clickEvent里的this.childNodes会包含空白文本节点（HTML换行产生的），你先判断node === event.target再判断node.nodeType ===1，可能会对文本节点做无效判断，应该先过滤出元素节点再做匹配。

修正后的代码示例 #

JavaScript部分 #

function clickEvent(event) {
  // 直接获取子元素节点，避免处理文本节点
  Array.from(this.children).forEach(function(node) {
    if (node === event.target) {
      node.children[1].click();
    }
  });
}

function changeEvent(event) {
  // 直接使用event.target获取触发事件的input元素
  const input = event.target;
  if (input.tagName === 'INPUT' && input.files.length > 0) {
    console.log(input.files[0]);
  }
}

function eventHandler(element, eventType, callback) {
  return document.getElementById(element).addEventListener(eventType, callback, false);
}

eventHandler('app', 'click', clickEvent);
eventHandler('app', 'change', changeEvent);

关键修正点 #

• 用this.children替代this.childNodes，直接获取子元素节点，跳过HTML空白文本节点；
• changeEvent中直接通过event.target定位触发事件的input，删除冗余的子节点遍历；
• 移除错误的dataTransfer访问，改用input自身的files属性获取选中文件。

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