ES6 - 事件

ES6+ 和现代 JavaScript 事件

JavaScript 通过称为事件（events）的机制增强了网页的交互性。事件是文档对象模型（DOM）的一部分，每个 HTML 元素都可以触发事件，从而触发 JavaScript 代码。有效地理解和处理事件对于动态 Web 应用程序至关重要。

事件表示软件识别到的一种行为或发生的事情，通常由用户交互（例如点击或按键）或浏览器本身（例如页面加载或错误）触发。当元素上发生事件时，我们可以通过执行一个函数来响应，这个函数称为事件处理程序（event handler）或事件监听器（event listener）。

现代事件处理：addEventListener

虽然旧的 JavaScript 代码可能使用 HTML 事件属性（例如 onclick=“myFunction()“）或 DOM 元素属性（例如 element.onclick = myFunction;），但现代且推荐的方法是使用 addEventListener() 方法。此方法提供了更大的灵活性，允许为一个事件添加多个处理程序，并更好地控制事件处理阶段（捕获和冒泡）。

addEventListener() 的基本语法是： element.addEventListener(type, listenerFunction); 或带选项的语法： element.addEventListener(type, listenerFunction, optionsObjectOrUseCaptureBoolean);

addEventListener() 的主要优点：

• 干净地分离 HTML 结构和 JavaScript 行为。
• 能够为一个元素上的相同事件类型添加多个事件监听器。
• 对事件传播阶段（捕获 vs. 冒泡）有更精细的控制。
• removeEventListener() 方法可用于分离处理程序，防止内存泄漏。

点击事件示例 (click)

click 事件是最常见的事件之一，通常在用户点击元素（通常使用鼠标主键）时发生。

示例：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Event Example</title>
    <style>
        #messageArea {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <p>Click the button below to see a message.</p>
    <button id="helloButton">Say Hello</button>
    <div id="messageArea"></div>

    <script>
        // 最佳实践：将 script 标签放在 body 结束处或使用 'defer'
        const button = document.getElementById('helloButton');
        const messageArea = document.getElementById('messageArea');

        function sayHello() {
            messageArea.textContent = 'Hello World! The button was clicked.';
        }

        button.addEventListener('click', sayHello);
    </script>
</body>
</html>

在此示例中，当 ID 为 helloButton 的按钮被点击时，sayHello 函数被执行。此函数会更新 ID 为 messageArea 的 div 的文本内容。这种方法避免了使用 document.write()，后者会覆盖整个页面内容，通常不建议用于更新已加载页面的部分内容。

表单提交事件 (submit)

当 <form> 元素被提交时，会触发 submit 事件。这是在数据发送到服务器之前进行表单验证的关键事件。

要阻止默认的表单提交（通常会重新加载页面），可以在事件监听器中调用 event.preventDefault()。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Submit Event Example</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Submit</button>
    </form>
    <p id="formFeedback"></p>

    <script>
        const form = document.getElementById('myForm');
        const feedback = document.getElementById('formFeedback');

        function validateForm(event) {
            event.preventDefault(); // 阻止默认的表单提交
            const usernameInput = document.getElementById('username');
            if (usernameInput.value.trim() === '') {
                feedback.textContent = 'Username cannot be empty!';
                feedback.style.color = 'red';
                return false; // 表示验证失败
            } else {
                feedback.textContent = 'Form submitted successfully (simulated)!';
                feedback.style.color = 'green';
                // 在实际应用中，你现在会通过 fetch() 或 XMLHttpRequest 发送数据
                // form.submit(); // 如果你希望在验证后继续进行原生提交
                return true; // 表示验证成功
            }
        }

        form.addEventListener('submit', validateForm);
    </script>
</body>
</html>

在这里，当表单被提交时，会调用 validateForm 函数。event.preventDefault() 阻止了浏览器默认的提交过程，允许我们的脚本执行验证。根据验证结果，它向用户提供反馈。

鼠标事件：mouseover 和 mouseout

这些事件分别在鼠标指针进入或离开元素时触发。它们对于创建交互效果（例如悬停高亮或工具提示）非常有用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mouseover/Mouseout Example</title>
    <style>
        #hoverDiv {
            width: 200px; height: 100px;
            background-color: lightblue;
            text-align: center; line-height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <p>Move your mouse over the blue box:</p>
    <div id="hoverDiv">
        Hover over me!
    </div>

    <script>
        const hoverDiv = document.getElementById('hoverDiv');
        const originalText = hoverDiv.textContent;

        hoverDiv.addEventListener('mouseover', function() {
            hoverDiv.textContent = 'Mouse Over!';
            hoverDiv.style.backgroundColor = 'lightgreen';
        });

        hoverDiv.addEventListener('mouseout', function() {
            hoverDiv.textContent = originalText;
            hoverDiv.style.backgroundColor = 'lightblue';
        });
    </script>
</body>
</html>

当鼠标指针进入 hoverDiv 时，它的文本和背景颜色会改变。当指针离开时，它们会恢复到原始状态。注意我们如何存储原始文本以便恢复它。

常见的 HTML 事件类型

DOM 标准定义了各种事件。以下是一些最常见和最有用的事件。‘触发条件’ 列描述了触发事件的条件。

事件类型 (属性名：on...)	触发条件…
click	用户点击一个元素。
dblclick	用户双击一个元素。
mousedown	在元素上按下鼠标按钮。
mouseup	在元素上释放鼠标按钮。
mousemove	鼠标指针在元素上移动。
mouseover	鼠标指针移到元素或其子元素上。
mouseout	鼠标指针移出元素或其子元素。
mouseenter	鼠标指针移到元素上（不冒泡）。
mouseleave	鼠标指针移出元素（不冒泡）。
keydown	按下键盘上的键。
keyup	释放键盘上的键。
keypress	按下产生字符值的键（已废弃；请使用 keydown）。
focus	元素获得焦点（例如，点击文本输入框）。
blur	元素失去焦点。
change	输入、选择或文本区域元素的值发生改变且元素失去焦点。
input	输入或文本区域元素的值发生改变（立即触发）。
submit	表单被提交。
reset	点击表单的重置按钮。
load	资源及其依赖资源已完成加载（例如，页面、图片）。通常用于 window 或 <img>。
unload	页面正在被卸载（谨慎使用；对于用户确认，通常更推荐使用 beforeunload）。
beforeunload	在页面即将卸载之前触发。可用于提示用户。
error	加载外部资源（例如，图片、脚本）或 JavaScript 执行过程中发生错误。
resize	浏览器窗口大小改变。通常用于 window。
scroll	元素滚动条正在滚动。可用于 window 或可滚动的元素。
contextmenu	点击鼠标右键，触发上下文菜单。
dragstart	用户开始拖动一个元素。
dragover	拖动的项目在一个有效的放置目标上。
drop	拖动的项目被放置在一个有效的放置目标上。
play	媒体（音频/视频）开始播放。
pause	媒体（音频/视频）暂停。
ended	媒体（音频/视频）播放完毕。
volumechange	媒体（音频/视频）的音量发生改变。

此列表并不详尽。有关完整的参考信息，请查阅 MDN Web Docs 关于事件的文档。记住使用 addEventListener 进行现代、健壮的事件处理。

深入学习：Event 对象、事件冒泡和捕获、事件委托。这些是用于高级事件管理的重要概念。