为何e.preventDefault()无法阻止页面刷新？

核心问题：事件绑定对象错误 #

submit事件属于<form>元素，而非<input type="submit">按钮。你当前将监听绑定在按钮上，导致e.preventDefault()从未被触发，表单依然会执行默认提交行为并刷新页面。

解决方案步骤： #

1. 修正事件监听目标
   将监听对象从按钮#btn改为表单#form，确保阻止默认行为的代码能被触发：

// 替换原按钮监听代码
document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();

    const produkt = document.getElementById('produkt').value;
    const anzahl = document.getElementById('anzahl').value;

    const einkauf = new Einkauf(produkt, anzahl);
    
    UI.addItems(einkauf);
});

2. 修复DOMContentLoaded的函数调用方式
   当前代码中UI.showItems()是直接执行函数，应传递函数引用，避免页面加载时提前执行：

document.addEventListener('DOMContentLoaded', UI.showItems); // 去掉末尾括号

3. 统一属性名大小写
   Einkauf类的属性为小写produkt和anzahl，但UI.addItems中使用了大写Produkt和Anzahl，会导致新增项显示undefined，需同步修改：

// 修改UI.addItems中的模板字符串
newItem.innerHTML = 
`<td>${item.produkt}</td>
 <td>${item.anzahl}</td>
 <td><a class="btn btn-danger btn-sm delete">x</a></td>`

完成以上修改后，表单提交将不再刷新页面，新增商品也能正常显示。

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