在Web开发中，我们经常需要使用表单来收集用户输入的数据，然后提交给服务器进行处理。然而，当用户点击“提交”按钮时，表单默认会刷新页面，这可能会破坏用户体验。为了避免这种情况发生，我们可以使用JavaScript的e.preventDefault()方法来防止表单提交时页面刷新。

　　什么是e.preventDefault()方法？

　　在Web开发中，事件处理程序通常会传递一个事件对象作为参数。这个事件对象（通常称为“事件”）包含了有关事件的所有信息，例如事件类型，事件目标等等。事件对象还具有可以影响事件处理程序行为的诸多属性和方法，其中最常用的就是preventDefault()方法。

　　preventDefault()是一个事件对象方法，可以防止默认行为发生。默认行为是指当事件发生时，在不修改任何代码的情况下，浏览器自动执行的操作。例如，在表单提交的情况下，如果我们不使用e.preventDefault()方法，浏览器将默认执行表单提交操作，并刷新页面。

　　如何使用e.preventDefault()方法？

　　使用e.preventDefault()方法的步骤非常简单。在表单提交事件处理程序中，首先需要获取事件对象。这通常是通过给表单元素添加“submit”事件处理程序来实现的，如下所示：

　　```javascript

　　var myForm = document.getElementById("myForm");

　　myForm.addEventListener("submit", function(e) {

　　 // 防止表单提交时页面刷新

　　 e.preventDefault();

　　});

　　```

　　在这个示例中，我们通过getElementById()方法获取了表单元素“myForm”，并为其添加了一个事件处理程序。在处理程序中，我们使用preventDefault()方法来阻止表单提交，从而避免页面刷新的发生。

　　需要注意的是，如果你的表单使用了jQuery库，则可以使用以下代码来实现相同的功能：

　　```javascript

　　$("#myForm").submit(function(e) {

　　 // 防止表单提交时页面刷新

　　 e.preventDefault();

　　});

　　```

　　如何测试e.preventDefault()方法是否生效？

　　为了测试我们的e.preventDefault()代码是否生效，我们可以通过两种方式。

　　方式一：查看表单是否被阻止提交

　　我们可以在事件处理程序中添加一个Alert（）方法，以便在表单提交时弹出消息。

　　```javascript

　　var myForm = document.getElementById("myForm");

　　myForm.addEventListener("submit", function(e) {

　　 // 防止表单提交时页面刷新

　　 e.preventDefault();

　　 // 弹出消息

　　 alert("表单已提交！");

　　});

　　```

　　如果e.preventDefault()方法成功生效，当我们点击“提交”按钮时，应该会弹出一个消息框，而不会执行表单提交行为。

　　方式二：查看浏览器控制台中的错误消息

　　如果我们在事件处理程序中添加了不支持的代码，那么浏览器控制台将会输出错误消息。同样的，如果我们成功地使用e.preventDefault()方法防止了表单提交，那么浏览器控制台将不会出现任何错误消息。

　　```javascript

　　var myForm = document.getElementById("myForm");

　　myForm.addEventListener("submit", function(e) {

　　 // 防止表单提交时页面刷新

　　 e.preventDefault();

　　 // 添加不支持的代码

　　 haha();

　　});

　　```

　　在这个示例中，我们在处理程序中添加了一个不支持的函数“haha()”，浏览器控制台将输出错误消息“Uncaught ReferenceError: haha is not defined”。

　　总结

　　e.preventDefault()是一个非常有用的方法，它可以防止表单提交时页面刷新。对于Web开发人员来说，避免页面刷新是非常重要的，因为刷新操作可以破坏用户体验。通过使用e.preventDefault()方法，我们可以轻松地避免表单提交时的页面刷新，从而创建更出色的Web应用程序。