为何我的keyup事件在释放任意按键时都会执行？（JS购物列表场景）

你的核心问题是keyup事件的判断逻辑写反了：当前代码中，按下Enter键时会直接return（不执行添加操作），而其他任意按键都会触发addListItem，这和你想要的“仅Enter键触发”完全相反。

修正后的事件监听代码 #

input.addEventListener("keyup", (event) => {
  // 仅当释放Enter键时，执行添加商品逻辑
  if (event.keyCode === 13) {
    addListItem(myArray);
  }
})

更推荐的写法（替代已废弃的keyCode） #

keyCode属于已废弃的API，建议使用event.key来判断，可读性更强：

input.addEventListener("keyup", (event) => {
  if (event.key === "Enter") {
    addListItem(myArray);
  }
})

额外优化建议 #

1. 避免全局函数污染：你的displayList和addListItem没有声明关键字，会自动挂载到全局作用域，建议用const声明：

const displayList = (arr) => {
  arr.forEach(item => {
    let li = document.createElement("li");
    li.textContent = item;
    list1.appendChild(li);
  })
}

const addListItem = (arr) => {
  let newItem = document.getElementById("input").value.trim(); // 顺便去掉首尾空格

  if (newItem === "") {
    alert("请输入要添加的商品");
  } else {
    arr.push(newItem);
    list1.innerHTML = "";
    displayList(myArray);
  }

  input.value = "";
}

2. 简化条件判断：原来的else if (newItem != "")完全可以简化成else，因为前面已经判断过空字符串的情况，逻辑更简洁。

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