17370845950

在使用JavaScript的addEventListener('click')监听HTML按钮时，若按钮位于

const searchBtn = document.querySelector('#searchBtn');
const list = document.querySelector('#uls');

searchBtn.addEventListener('click', function () {
    const movieName = document.createElement('LI');
    const text = "works";
    list.append(movieName);
    movieName.innerHTML = text;  
});

• type="submit"：此类型的按钮旨在提交其所属的表单。当用户点击这类按钮时，浏览器会触发表单的 submit 事件，并尝试将表单数据发送到服务器（通常导致整个页面重载）。
• type="button"：此类型的按钮不具备任何默认的表单相关行为。它仅仅是一个可点击的元素，其行为完全由开发者通过JavaScript事件监听器来控制。

因此，当您在一个

搜索

    搜索
    

        
    

在这种情况下，由于按钮不再是任何表单的一部分，其默认类型不再是"submit"，从而避免了意外的提交行为。

2. 当需要表单结构但希望阻止其默认提交行为时

有时，您可能确实需要使用

    
    提交 
    

// JavaScript
const myForm = document.querySelector('#myForm');
const searchBtn = document.querySelector('#searchBtn'); // 注意：此按钮仍会触发表单提交
const list = document.querySelector('#uls');

// 监听表单的submit事件，而不是按钮的click事件
myForm.addEventListener('submit', function (event) {
    event.preventDefault(); // 关键：阻止表单的默认提交行为（即页面重载）

    // 在这里执行您希望的DOM操作，例如添加LI
    const movieName = document.createElement('LI');
    const text = "works";
    list.append(movieName);
    movieName.innerHTML = text;

    // 如果需要，可以在这里手动触发AJAX提交或其他自定义逻辑
    console.log("表单已提交，但页面未重载。");
});

// 如果searchBtn的type是"button"，也可以为其绑定click事件，
// 但如果它是"submit"且你监听了myForm的submit事件并preventDefault，
// 那么searchBtn的click事件就不需要再阻止默认行为了。
// searchBtn.addEventListener('click', function() {
//     // ... 您的click事件逻辑 ...
// });

解释： event.preventDefault()方法会阻止事件的默认行为。当在submit事件处理器中调用它时，它会阻止表单提交并导致页面重载。这样，您就可以在不刷新页面的情况下执行自定义的提交逻辑或DOM操作。

总结与最佳实践

理解HTML元素的默认行为对于编写健壮、可预测的前端代码至关重要。当在

通过遵循这些最佳实践，您可以确保JavaScript事件按照预期工作，提供流畅且无意外重载的用户体验。