如何解决事件监听器触发函数生成input值为undefined的问题

问题验证 #

你的推测完全正确。DOM事件绑定的回调函数被触发时，浏览器会自动将当前触发的事件对象（点击场景下是MouseEvent实例）作为第一个参数传入回调。你手动调用showName()时确实没有传参，参数值为undefined，但事件触发时pData拿到的是事件对象，既不是数组也不是undefined，此时访问pData[0]返回的就是undefined，赋值给input的value后就显示为字符串'undefined'。

修复方案 #

可任选以下两种方案实现需求：

方案1：绑定回调时用箭头函数包裹，主动不传参 #

修改按钮事件绑定代码即可，点击时会按照无参逻辑调用showName：

button.addEventListener('click', () => showName())

方案2：优化showName参数校验逻辑，提升鲁棒性 #

直接修改函数内部的判断规则，仅当传入的参数是数组时才赋值value，就算后续有其他场景误传非数组参数也不会出问题，更推荐使用：

function showName(pData) {
  let singleName = document.createElement('input')
  // 替换原有的typeof判断，只处理数组类型的参数
  if (Array.isArray(pData)) {
    singleName.value = pData[0]
  }
  app.append(singleName)
}

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