时间戳

首页 > 解决方案 > 如何在事件侦听器定义的事件上运行不带参数的函数

javascript - 如何在事件侦听器定义的事件上运行不带参数的函数

问题描述

我有一个创建input元素并将其附加到另一个元素的函数。

我正在尝试这样做，以便如果将数组用作此函数的参数，则将数组中的数据用作value元素的input。如果没有将数组指定为参数，则输入值应为空。

这是我的代码

HTML

<div id="app></div>

Javascript

let app = document.getElementById('app')
let people = [["Adam",10],["Peter",90],["John",30],["Stephen",50]]

for (var key in people) {
  showName(people[key])
}


function showName(pData) {
  let singleName = document.createElement('input')
  
          if (typeof pData !== 'undefined') {
            singleName.value = pData[0]
        }
  
      app.append(singleName)
}


let button = document.createElement('button')
    button.addEventListener('click',showName)
    button.innerHTML = "Add name"
    app.prepend(button)

这很好用，我可以运行带有参数和不带参数的函数，它可以按预期工作。

但是，当我将函数设置为通过事件侦听器触发并且没有参数时，我可以输入值为“未定义”的输入，如果我通过编写 showName() 来运行该函数，则情况并非如此。

因此，这使我相信当事件通过事件侦听器触发时，正在传递某种参数。是这样吗？如果是这样，我该如何让按钮创建一个input没有价值的元素？

标签： javascripthtmldom

解决方案

因此，这使我相信当事件通过事件侦听器触发时，正在传递某种参数。是这样吗？

是的，您的函数将传递事件对象，其中包含有关发生的点击的信息

如果是这样，我该如何使按钮创建一个没有值的输入元素？

与其将 showName 直接传递给 addEventListener，不如创建一个新函数。该函数将忽略事件对象，并调用不带参数的 showName：

button.addEventListener('click', (event) => showName())
// Or:
button.addEventListener('click', () => showName())

推荐阅读