理解 DOM（文档对象模型）的树状逻辑结构及其在网页脚本交互中的核心作用。
掌握 JavaScript 事件的基本概念，包括事件传播机制（冒泡）及绑定方式。
熟练运用窗口事件、鼠标事件和键盘事件响应用户操作。
学会结合 DOM 操作与事件监听，实现动态修改页面样式和内容的交互功能。
文档对象模型 (Document Object Model, 简称 DOM) 是连接网页与脚本的编程接口。它将 HTML 或 XML 文档表示为一个由节点和对象组成的逻辑树结构（DOM Tree）。通过 DOM，开发者可以定义访问和操作文档的方式，从而动态地改变网页的结构、内容和样式。
为了提供动态的用户界面，JavaScript 引入了“事件”机制。事件是发生在浏览器或页面上的特定动作（如页面加载完成、用户点击按钮、按下键盘等）。这些事件通常绑定在 DOM 元素上。
默认情况下，JavaScript 事件采用冒泡 (Bubbling) 传播机制。这意味着事件首先在最具体的元素（被点击的子元素）上触发，然后逐级向上传播到其父元素，直至 document 或 window 对象。
内联绑定 (Inline)：直接在 HTML 标签中编写事件属性（如 onclick="..."），这种方式不利于代码维护，现代开发中较少使用。
外部脚本绑定：在独立的 JavaScript 文件或 <script> 标签中，通过 addEventListener 等方法绑定事件，实现了结构 (HTML) 与行为 (JS) 的分离，是推荐的最佳实践。
JavaScript 提供了丰富的事件类型来捕捉用户的各种操作。以下是三类最常用的事件：
这类事件由 window 对象触发，通常与浏览器的状态有关。
这是用户与页面交互最频繁的事件类型，由鼠标操作触发。
这类事件由键盘按键操作触发，常用于表单处理和快捷键功能。
利用鼠标事件动态修改样式
本案例演示如何通过监听 click 事件，动态修改 DOM 元素的 CSS 样式。
页面上有一个绿色的容器，内部文字为白色。当用户点击该容器时，文字颜色瞬间变为黑色。
<!DOCTYPE html>
<html>
<head>
<title>DOM 与事件交互示例</title>
<style>
.container {
height: 150px;
width: 300px;
background-color: green;
text-align: center;
color: white; /* 初始文字颜色为白色 */
font-size: 30px;
margin: 100px auto; /* 居中显示 */
font-weight: bolder;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
cursor: pointer; /* 提示用户可点击 */
transition: color 0.3s ease; /* 添加过渡动画 */
}
</style>
</head>
<body>
<div class="container">技术博客演示</div>
<script>
// 1. 获取 DOM 元素
const container = document.querySelector('.container');
// 2. 绑定点击事件监听器
container.addEventListener('click', function(event) {
// 3. 操作 DOM：修改样式
// 将文字颜色改为黑色
container.style.color = "black";
// 可选：在控制台输出事件对象信息
console.log("容器被点击了", event);
});
</script>
</body>
</html>选择器: 使用 document.querySelector('.container') 精准定位元素。
事件监听: addEventListener('click', callback) 是标准的绑定方式，支持多个监听器且易于移除。
样式操作: 通过 element.style.property 直接修改内联样式。注意 CSS 中的连字符属性（如 background-color）在 JS 中需转为驼峰命名（backgroundColor），但单单词属性（如 color）保持不变。
利用键盘事件响应用户输入
本案例演示如何监听键盘事件，检测特定按键（回车键），并动态更新页面内容。
页面上有一个输入框。当用户在输入框中按下“Enter”键时，下方的段落区域会显示提示信息：“你按下了回车键”。
<!DOCTYPE html>
<html>
<head>
<title>键盘事件处理</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 20px;
}
.inputArea {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
p {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h3>请在下方输入框按下 Enter 键查看效果</h3>
<input type="text" class="inputArea" placeholder="在此输入...">
<p id="messageBox"></p>
<script>
// 1. 获取相关 DOM 元素
const input = document.querySelector(".inputArea");
const messageBox = document.querySelector("#messageBox");
// 2. 绑定键盘按下事件 (keydown)
input.addEventListener('keydown', function(event) {
// 3. 判断按键代码
// 13 代表 Enter 键 (也可使用 event.key === 'Enter')
if (event.keyCode === 13) {
// 4. 操作 DOM：更新文本内容
messageBox.textContent = "你按下了 Enter 键！";
// 可选：防止默认行为（如果在表单中可能会提交表单）
// event.preventDefault();
}
});
// 补充：监听按键释放 (keyup)
input.addEventListener('keyup', function(event) {
if (event.keyCode !== 13) {
// 如果按下的不是回车，清空消息
messageBox.textContent = "";
}
});
</script>
</body>
</html>事件类型选择: 这里使用了 keydown，它在按键按下时立即触发。若需检测组合键或游戏控制，keydown 更合适；若需获取最终输入的字符值，keyup 或 input 事件可能更好。
按键识别:
传统方式：检查 event.keyCode (值为 13 代表 Enter)。注意：keyCode 已逐渐被废弃，但在旧代码中仍常见。
现代方式：检查 event.key ( 值为字符串 "Enter")，推荐使用此方式以提高可读性和兼容性。
条件逻辑: 在事件回调中加入 if 判断，确保只在特定按键触发时执行逻辑。
在实际开发中，DOM 操作与事件处理通常是紧密结合的。以下是一些最佳实践建议：
委托事件 (Event Delegation): 如果需要为大量子元素绑定相同事件，建议在父元素上绑定一次监听器，利用事件冒泡机制，通过 event.target 判断具体触发源。这能显著减少内存消耗。
分离关注点: 尽量避免在 HTML 中使用 onclick="..." 内联写法，将所有逻辑保留在独立的 JavaScript 文件中。
性能优化: 频繁触发的事件（如 resize, scroll, keyup）可能导致性能问题，建议使用 防抖 或 节流 技术限制回调函数的执行频率。
清理资源: 在单页应用 (SPA) 中，当组件销毁时，记得移除不再需要的事件监听器，防止内存泄漏。