核心思想：

1. 将输入框和提交按钮包裹在一个 标签内。
2. 监听
   元素的 submit 事件，而不是输入框的 keyup 事件。
3. 在 submit 事件处理函数中，使用 event.preventDefault() 来阻止表单的默认提交行为（即页面刷新）。

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
  <h2>Shopping List</h2>
  <form id="myForm"> <!-- 添加 form 标签并赋予 ID -->
    <div class="header">
      <input type="text" id="input" placeholder="Item">
      <button type="submit">Add Item</button> <!-- 按钮类型设为 submit -->
    </div>
  </form>
  <ul id="itemList"></ul>
</div>

J*aScript 逻辑调整

接下来，修改 J*aScript 代码以监听表单的 submit 事件。

// 全局变量，无需在函数间传递
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
const input = document.getElementById("input"); // 获取输入框元素
const myForm = document.getElementById("myForm"); // 获取表单元素

// 显示列表函数，不再需要传递数组参数
const displayList = () => {
  list1.innerHTML = ""; // 清空现有列表，避免重复
  myArray.forEach(item => {
    let li = document.createElement("li");
    li.textContent = item;
    list1.appendChild(li);
  });
};

// 初始显示列表
displayList();

// 添加列表项函数，现在接收事件对象
const addListItem = (event) => {
  event.preventDefault(); // 阻止表单的默认提交行为（页面刷新）

  let newItem = input.value.trim(); // 获取输入值并去除首尾空格

  if (newItem === "") {
    alert("Please enter a value if you wish to add something to your list.");
  } else {
    myArray.push(newItem);
    displayList(); // 更新显示列表
  }
  input.value = ""; // 清空输入框
};

// 监听表单的 submit 事件
myForm.addEventListener("submit", addListItem);

代码优化说明：

• event.preventDefault(): 这是关键一步，它阻止了浏览器在表单提交时执行默认的页面刷新行为。
• 统一处理: 现在，无论是用户按下回车键，还是点击“Add Item”按钮，都会触发 myForm 的 submit 事件，并由 addListItem 函数进行处理。
• 全局变量使用: myArray 和 list1 都是全局变量，因此在 displayList 和 addListItem 函数内部可以直接访问它们，无需作为参数传递，使代码更简洁。
• input.value.trim(): 使用 trim() 方法可以去除用户输入内容两端的空白字符，提高输入的健壮性。
• 清空列表优化: 在 displayList 函数内部，我们添加了 list1.innerHTML = ""; 这一行，确保每次重新渲染列表时，旧的列表项会被完全清除，避免重复添加。

3. 注意事项与最佳实践

• event.key vs event.keyCode: 在现代J*aScript中，推荐使用 event.key 属性来判断按键，因为它返回的是按键的字符表示（如 'Enter', 'Escape', 'a'），比数字 keyCode 更具可读性和语义化，且兼容性良好。
• 表单的语义化: 使用 元素不仅仅是为了事件处理，它还为屏幕阅读器和其他辅助技术提供了重要的语义信息，提升了Web应用的可访问性。
• 输入验证: 在 addListItem 函数中，我们已经包含了简单的非空验证。在实际应用中，您可能需要更复杂的验证逻辑，例如检查输入类型、长度等。
• DOM操作效率: 频繁地操作 innerHTML 可能会影响性能，尤其是在大型列表中。对于非常大的列表，可以考虑使用文档片段（DocumentFragment）来批量添加元素，或者使用虚拟DOM库（如React, Vue）来优化渲染。然而，对于本例中的购物清单，直接清空并重新渲染通常是可接受的。