在开发 Web 应用程序时，我们通常使用表单和按钮以及其他交互元素来获取用户输入。但是，默认情况下，当点击按钮时，页面会被刷新并重新加载，这可能会干扰用户的工作流程。为了避免这种情况，我们可以使用 JavaScript 来防止页面的自动刷新。
使用事件监听器
为了防止页面刷新，我们需要将按钮的默认行为替换为一个自定义的操作。我们可以通过添加一个事件监听器来实现这一点，该监听器可以捕获按钮单击事件并执行我们选择的操作。
以下是示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- --------- ---------- ------------------ - -------------------------- -- ----------- ------------------- ----- ---------------- --- --------------- - ---------- - ------ ------ - ------------------------------------ ----------------------------------- ------------- --- ---------- ------- ------ ------- -------- ------------------------- -------- ----------- ------------- --------- ------------- ------------------------- -------- ------- -------
在上面的代码中，我们首先定义了一个名为 handleClick 的函数，该函数将被调用以处理按钮单击事件。在函数的第一行，我们调用了 event.preventDefault() 来阻止表单提交的默认行为。然后，我们显示一个警告框来通知用户按钮已被点击，并可以在该函数中添加其他代码以处理表单数据。
最后，在页面加载时，我们获取按钮元素并使用 addEventListener 方法将 handleClick 函数附加到按钮的 click 事件上。
现在，当用户单击按钮时，默认的表单提交行为将被阻止，而我们自定义的操作将被执行，从而避免了页面的刷新。
结论
通过使用 JavaScript 的事件监听器，我们可以轻松地防止页面在按钮单击时自动刷新。这不仅可以提高用户体验，还可以确保输入的数据不会丢失。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11097
