event.preventDefault()使用指南

event.preventDefault(); 是 JavaScript 中用于阻止默认事件行为的方法。具体而言，它在处理 HTML 元素（如链接和表单）的事件时非常有用。下面是详细的解释和示例，说明它的作用和使用场景。

解释

在 HTML 中，许多元素有默认行为。例如：

当点击一个链接（<a>）时，默认行为是导航到该链接的 href 指定的 URL。
当提交一个表单（<form>）时，默认行为是将表单数据发送到表单的 action 属性指定的 URL，并刷新页面。

event.preventDefault(); 用于阻止这些默认行为，让你可以用 JavaScript 自定义这些行为。

使用场景

阻止链接导航：

比如，你有一个链接，点击该链接时，不希望它导航到其他页面，而是执行某些 JavaScript 代码。

html 复制代码

<a href="https://example.com" id="myLink">Click me</a>

javascript 复制代码

document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认导航行为
    alert('Link clicked, but no navigation');
});

阻止表单提交：

比如，你有一个表单，提交该表单时，不希望页面刷新，而是通过 AJAX 发送数据。

html 复制代码

<form id="myForm">
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

javascript 复制代码

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认表单提交行为
    alert('Form submitted, but no page refresh');
    // 可以在这里执行 AJAX 提交表单数据的逻辑
});

在你代码中的作用

在你的代码中，event.preventDefault(); 用于以下场景：

点击搜索按钮时阻止默认表单提交行为：
javascript 复制代码
```
$('#searchButton').on('click', function(event) {
    event.preventDefault(); // 阻止默认表单提交行为
    authorName = $('input[name="author_name"]').val();
    getTweets(1); // 重新获取第一页的推文
});
```
这段代码的作用是，当用户点击搜索按钮时，阻止默认的表单提交行为（即页面刷新和数据发送到服务器），改为通过 JavaScript 获取输入框的值，并调用 getTweets 函数发送 AJAX 请求，从而实现无刷新地动态获取数据。
点击分页链接时阻止默认链接导航行为：
javascript 复制代码
```
$(document).on('click', '.pagination-link', function(event) {
    event.preventDefault(); // 阻止默认链接导航行为
    const page = $(this).data('page');
    getTweets(page); // 获取相应页码的推文
});
```
这段代码的作用是，当用户点击分页链接时，阻止默认的链接导航行为（即跳转到新的 URL），改为通过 JavaScript 获取点击的页码，并调用 getTweets 函数发送 AJAX 请求，从而实现无刷新地分页显示数据。

结论

通过使用 event.preventDefault();，你可以阻止默认的浏览器行为，并使用 JavaScript 自定义响应逻辑，从而实现更灵活和动态的用户交互。