第三部分：进阶概念 8.事件处理 --[JavaScript 新手村：开启编程之旅的第一步]

JavaScript 事件处理是 Web 开发中不可或缺的一部分，它允许开发者响应用户的交互行为（如点击、键盘输入等）或浏览器的行为（如页面加载完成）。通过事件处理，我们可以使网页更加动态和互动。以下是关于 JavaScript 事件处理的详细介绍，包括几种添加事件监听器的方法及其特点。

事件监听器

事件监听器是 JavaScript 中用于响应用户或浏览器生成的事件（如点击、提交表单等）的关键工具。通过 addEventListener 方法，我们可以为指定的 DOM 元素添加一个或多个事件处理器。以下是两个具体的示例，展示了如何使用事件监听器来增强网页交互。

示例 1: 动态按钮点击计数器

在这个例子中，我们将创建一个简单的按钮，并使用事件监听器来跟踪按钮被点击了多少次，然后在页面上显示这个计数。

<!-- HTML -->
<button id="clickButton">Click me!</button>
<p id="clickCount">Clicked 0 times</p>

<script>
// 获取 DOM 元素引用
const button = document.getElementById('clickButton');
const countDisplay = document.getElementById('clickCount');

let clickCount = 0;

// 添加点击事件监听器
button.addEventListener('click', function() {
     
     
    clickCount++;
    countDisplay.textContent = `Clicked ${ 
       clickCount} times`;
});
</script>

解释：

• 我们首先获取了按钮和用于显示点击次数的 <p> 标签的引用。
• 定义了一个变量 clickCount 来存储点击次数，并初始化为 0。
• 使用 addEventListener 方法为按钮添加了一个点击事件监听器。每当用户点击按钮时，都会触发匿名函数，该函数会增加 clickCount 的值，并更新页面上的文本以反映新的点击次数。

示例 2: 表单验证 - 提交前检查输入有效性

此示例展示了一个表单，在提交之前使用事件监听器来验证用户是否正确填写了所有必填字段。如果存在无效输入，则阻止表单提交并给出提示信息。

<!-- HTML -->
<form id="userForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <span id="nameFeedback"></span><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <span id="emailFeedback"></span><br>

    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('userForm').addEventListener('submit', function(event) {
     
     
    let isValid = true;
    
    // 检查姓名输入框
    const nameInput = document.getElementById('name');
    const nameFeedback = document.getElementById('nameFeedback');
    if (!nameInput.value.trim()