preventDefault() 无法阻止页面重载，通常是因为事件监听器错误地绑定在了 上，而非 元素本身；只有表单的 submit 事件才能被 preventDefault() 有效拦截。
`preventdefault()` 无法阻止页面重载，通常是因为事件监听器错误地绑定在了 `
在 Web 开发中，event.preventDefault() 是阻止表单默认提交行为（即页面刷新）的关键方法，但其生效前提极为明确：必须将事件监听器绑定到 。若错误地将 submit 事件监听器附加到
✅ 正确做法如下：
- 选择表单元素（如通过 class、id 或其他选择器）；
- 为表单绑定 'submit' 事件监听器；
- 在回调中第一时间调用 event.preventDefault()；
- 再执行自定义逻辑（如收集表单数据、创建对象、更新数组等）。
以下是可直接运行的完整示例：
<form class="bookForm">
<input type="text" id="titleInput" placeholder="Title" required>
<input type="text" id="authorInput" placeholder="Author" required>
<input type="number" id="pagesInput" placeholder="Pages">
<label>
<input type="checkbox" id="readInput"> Already read?
</label>
<button class="submitBook" type="submit">Add Book</button>
</form>// ✅ 正确：监听 form 的 submit 事件
const bookForm = document.querySelector('.bookForm');
const titleInput = document.getElementById('titleInput');
const authorInput = document.getElementById('authorInput');
const pagesInput = document.getElementById('pagesInput');
const readInput = document.getElementById('readInput');
bookForm.addEventListener('submit', (event) => {
event.preventDefault(); // ← 关键：必须在此处调用，且绑定对象必须是 form
// 安全获取输入值（建议增加空值/类型校验）
const title = titleInput.value.trim();
const author = authorInput.value.trim();
const pages = parseInt(pagesInput.value) || 0;
const newBook = new Book(title, author, pages, readInput.checked);
myLibrary.push(newBook);
console.log('Book added:', newBook);
console.log('Current library:', myLibrary);
// 可选：重置表单（提升用户体验）
bookForm.reset();
});⚠️ 常见误区与注意事项：
- ❌ 错误写法：document.querySelector('.submitBook').addEventListener('submit', ...)
→ 按钮没有 submit 事件，此监听器永不触发。 - ✅ 替代方案（不推荐）：监听按钮的 click 事件并调用 event.preventDefault()，但无法阻止用户按 Enter 键提交，存在交互缺陷。
- ? 安全增强：建议对用户输入做基础校验（如非空、数字范围），避免无效数据进入 myLibrary。
- ? 若使用动态渲染表单（如通过 JS 插入），请确保事件监听器在 DOM 加载完成后绑定，或使用事件委托（bookForm.addEventListener('submit', ...) 本身已足够，无需委托）。
总结：preventDefault() 是否生效，不取决于代码是否书写正确，而取决于事件源是否准确。牢记——表单提交行为由 。遵循这一原则，即可彻底告别意外页面重载。
