Javascript 是否有一种方法可以同时添加onkeypress和onclick eventlistener？

我有两个问题，有点相关

1） 可以将下面的2个函数组合成1个更精简的函数，或者我必须简单地创建一个函数并在两个EventListener中调用它吗

input.addEventListener("keyup", () => {
   if (event.keyCode === 13) {
     // code here 
}

及

但这本质上是代码的重复

---

2） 有没有一种方法可以根据数组的内容制作一种简单/基本的自动完成菜单（类似于谷歌，但功能远不及谷歌）？在输入/搜索栏中键入时？为了澄清，w3schools示例对我不起作用。

这就是如何将多个事件附加到单个元素的方法。 作为参考，你可以看看

var elem=document.querySelector（'input'））
元素addEventListener（'keyup'，eventhandler，false）；
//元素addEventListener（'click'，eventhandler，false）；//对这件事不太清楚
元素addEventListener（'keydown'，eventhandler，false）；
函数eventhandler（事件）{
如果（event.keyCode==13）{//按enter键，则会收到警报
警报（“hi”）；
}
}

---

您可以尝试将onclick-eventListener和/或keypress-eventListener直接添加到按钮中，并将另一个添加到javascript中，其中包含您希望在其自身函数中运行的代码内容

<input type="text" id="input1" placeholder="searchbar">
<button id="button1" onclick=foo()>Search</button>

---

至于自动完成菜单，我不确定，但您可以尝试将其改为下拉菜单，但是，这可能会使您对问题第一部分的需求无效

请使用在两个事件侦听器中调用的单独函数

function doWhatIWant() {
    // code here
}

input.addEventListener("keyup", () => {
   if (event.keyCode === 13) {
     doWhatIWant();
}

input.addEventListener("click", () => {
     doWhatIWant();
}

对于你问题中的#1，其他答案似乎就足够了

作为替代方案，您可以使用一些现代JS编写一些东西，为事件名称数组添加侦听器，并在处理程序函数中处理它们，如下所示：

//处理keyup/单击。
const handlerFn=e=>e.type=='keyup'？e、 keyCode===13&&doSomething（e.type）：doSomething（e.type）；
//做了点什么。
const doSomething=type=>console.log（`doSomething当${type}触发时，`）；
//添加句柄/单击侦听器。
['keyup'，'click'].forEach（e=>window.addEventListener（e，event=>handlerFn（event））
单击此处，或按enter键。
但keyup和keydown键不是很像吗？它们都来自同一个元素，但是，我希望单击的按钮是一个完全不同的元素，所以我想知道是否有可能将它们与输入的公共链接联系起来？还有，人们是怎么做的？点击事件。它与输入类型文本一起工作，所以我只是举了一个例子，说明如何将事件联系在一起。最后的false代表什么，我假设true也是一种可能性，那会做什么呢？对于
点击
事件，没有
event.keyCode
。@Anan当你写答案时，编辑器中有一个按钮可以打开代码片段编辑器。这就是我一直在做的事情，希望能有一些更精简的东西，但这似乎是我能得到的最好的东西。您知道自动完成或其他类似问题的解决方案吗？想要避免下拉，因为它将是巨大的（可能会从屏幕上消失），箭头也破坏了我的美感。有许多自动完成的小部件，尽管其中一些需要jQuery（当然包括jQuery UI小部件）。但是，有一个可以工作，它需要两次提交相同的数据才能工作。你应该发布一个新的问题与此问题。听起来你没有正确使用异步代码。有没有办法使
thingsToFilter
数组可以更新？我有一个自动完成功能，只要数组是预定义的，它就可以工作。然而，我希望从rest api下载所述数组以供使用，但如果我下载了数组，它似乎不起作用。是的，过滤器可以是您想要的任何数据源。该示例仅显示了一个带有“title”和“description”的对象数组，但返回的任何对象都可以根据需要进行过滤和排序。如果您在使用的数据源中遇到问题，您可以尝试使用一些代码打开一个新问题，以测试API的响应以及您正在使用的任何代码。我唯一的猜测是数据源的格式与脚本预期的格式不同。是的，我现在明白了，测试不够，问题是直到我第二次访问搜索栏时它才会应用，只是要整理它产生的大量列表，将我的搜索栏拉伸到一个新的位置，我必须在它响应之前传递它两次，这是一件痛苦的事情（目前只需按键就可以解决它，问题是，这意味着它每按一次按钮都会重新加载阵列，这对速度不好），假设您不知道如何在一个实例后应用它，并且只在值更改时更新它？听起来它好像启动了，但是接下来发生的任何事情都会在数据准备就绪之前执行，触发的第二个事件是在该点读取第一个调用的数据。我会确保您在进一步执行之前等待调用完成。另一个有助于解决资源问题的技巧是消除压力，我建议如下。这篇关于CSS技巧的文章解释了更多内容，并有一个使用ajax的按键示例：
    function foo() {
      searchResult = document.getElementById("input1").value;
      // code here
    }

    const searchBar = document.getElementById("input1");
    searchBar.addEventListener("keyup", () => {
        if (event.keyCode === 13) {
          // executes the button click
          document.getElementById("myBtn").click();
        }
    });

function doWhatIWant() {
    // code here
}

input.addEventListener("keyup", () => {
   if (event.keyCode === 13) {
     doWhatIWant();
}

input.addEventListener("click", () => {
     doWhatIWant();
}