详细介绍：技术演进中的开发沉思-219 Ajax：样式与事件

news/2026/1/17 22:44:40/文章来源:https://www.cnblogs.com/gccbuaa/p/19497304

如果说 HTML 是网页的骨架，CSS 是它的血肉与霓裳，那么 JavaScript 便是赋予这具躯体生命与灵魂的魔法师。而样式控制与事件处理，正是这位魔法师手中最核心的两缕咒语：样式控制 负责雕琢页面的视觉呈现，让它从静态的画，变成动态的表演；事件处理 则负责聆听用户的每一个动作，让页面能够感知、响应，从而完成人机之间的对话。

一、样式控制

通过 JavaScript，我们不再满足于 CSS 定义好的静态样式。我们可以根据用户的行为、数据的变化，实时地、精确地改变页面元素的外观，就像一位指挥家，在不同的乐章时点亮不同的灯光。

两种操控方式： className 与 style 对象

在 JavaScript 的世界里，操控样式主要有两种方式，它们各有侧重，互为补充。

className：优雅的 “换装”className 属性就像给元素准备了多套 “服装”（CSS 类）。你可以通过修改 className 的值，来为元素换上不同的 “衣服”。
```
// HTML: ...
const box = document.getElementById('box');
// 为元素换上 'highlight' 这套新衣服
box.className = 'highlight';
// 也可以在原有基础上添加新衣服（需要手动用空格分隔）
box.className += ' active';
```
这种方式的优点是职责分离。CSS 负责定义 “服装” 的具体样式，JavaScript 只负责决定 “穿哪件”。这让代码更清晰、更易于维护，尤其适合处理复杂的、多状态的样式切换（如按钮的正常、 hover、点击、禁用状态）。
style 对象：精细的 “梳妆”style 对象则提供了一种更直接、更精细的操控方式。它允许你直接读写元素的行内样式（inline style），就像亲手为元素梳妆打扮，调整每一个细节。
```
const box = document.getElementById('box');
// 直接为元素设置背景颜色和宽度
box.style.backgroundColor = 'blue';
box.style.width = '200px';
```
这里有几个需要注意的细节：
1. 驼峰命名法：CSS 属性名中的连字符（-）在 JavaScript 中需要转换为驼峰式命名。例如 background-color 变成 backgroundColor，font-size 变成 fontSize。
2. 特殊的 float：由于 float 是 JavaScript 的关键字，所以在 style 对象中，我们使用 cssFloat（标准浏览器）或 styleFloat（旧版 IE）来操作浮动属性。
3. 赋值需带单位：当你为 width, height, margin 等需要单位的属性赋值时，必须提供完整的字符串（如 '10px', '50%'），不能只写数字。
style 对象非常适合用于动态计算的样式，比如根据鼠标位置来改变元素的 left 和 top 值，实现拖拽效果。

二、事件处理：页面的感官与神经

如果说样式控制是让页面 “动起来”，那么事件处理就是让页面 “活起来”。事件是用户或浏览器自身执行的某种动作，如点击鼠标、按下键盘、页面加载完成等。JavaScript 通过 “监听” 这些事件，并执行相应的代码，来实现交互。

事件模型：捕捉与冒泡的舞蹈

当一个事件发生时（比如点击一个按钮），它并非只在目标元素上停留，而是会经历一个 “传播” 的过程。这就是事件流。主要有两种模型：

IE 事件模型（冒泡型）：事件从触发事件的目标元素（最具体的元素）开始，然后逐级向上传播到更不具体的元素（父元素、祖父元素... 直到 document）。这像水中的气泡，从水底慢慢浮到水面。
```
点击按钮 -> 按钮 -> div（父） -> body -> html -> document
```
DOM 标准事件模型：它包含三个阶段：
- 事件捕捉阶段：事件从最不具体的 document 开始，逐级向下 “捕捉” 到目标元素。
- 目标阶段：事件到达并触发于目标元素本身。
- 事件冒泡阶段：事件从目标元素开始，逐级向上 “冒泡” 回 document。
```
捕捉：document -> html -> body -> div（父） -> 按钮
目标：按钮
冒泡：按钮 -> div（父） -> body -> html -> document
```
这种三阶段模型提供了更强大的事件处理能力。

事件的注册与注销

为元素绑定事件处理函数（也叫 “注册事件”），有多种方式。

传统方式（DOM0 级）：直接通过元素的属性赋值。
```
const btn = document.getElementById('myBtn');
btn.onclick = function() {alert('按钮被点击了！');
};
// 注销事件
btn.onclick = null;
```
这种方式简单直接，但缺点是一个元素的同一个事件只能绑定一个处理函数，后面的会覆盖前面的。

现代方式（DOM2 级）：使用 addEventListener 和 removeEventListener。

const btn = document.getElementById('myBtn');
function handleClick() {alert('按钮被点击了！');
}
// 注册事件，第三个参数 useCapture 默认为 false（在冒泡阶段触发）
btn.addEventListener('click', handleClick, false);
// 注销事件（必须传入与注册时相同的函数引用）
btn.removeEventListener('click', handleClick, false);

这种方式是目前的标准和推荐做法。它允许为同一个事件绑定多个处理函数，并且可以精确地注销某个特定的函数。

IE 方式（兼容旧版）：在旧版 IE 中，使用 attachEvent 和 detachEvent。
```
btn.attachEvent('onclick', handleClick);
btn.detachEvent('onclick', handleClick);
```
注意事件名前要加 on，且它只支持冒泡。

事件对象 (Event Object)：交互的信使

当事件被触发时，浏览器会自动创建一个事件对象（通常作为参数传递给处理函数），它包含了与该事件相关的所有信息。

btn.addEventListener('click', function(event) {// event 就是事件对象console.log(event);
});

事件对象 event 是交互的 “信使”，它带来了关键信息：

event.target (或 IE 的 event.srcElement)：指向触发事件的原始目标元素。这在事件委托中至关重要。
event.type：事件的类型，如 'click', 'keydown'。
event.keyCode / event.code：对于键盘事件，返回按下的键的代码。
event.clientX, event.clientY：对于鼠标事件，返回鼠标在视口中的坐标。
event.preventDefault() (或 IE 的 event.returnValue = false)：阻止事件的默认行为。例如，阻止链接跳转、表单提交。
event.stopPropagation() (或 IE 的 event.cancelBubble = true)：停止事件的进一步传播（无论是冒泡还是捕捉）。

常用事件类型

JavaScript 可以处理的事件种类繁多，覆盖了用户与页面交互的方方面面：

鼠标事件：click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup, contextmenu (右键菜单)。
键盘事件：keydown, keyup, keypress (已逐渐被弃用)。
表单事件：submit, reset, change, input, focus, blur。
文档 / 窗口事件：load, unload, resize, scroll, DOMContentLoaded (DOM 树构建完成)。