106. 模块十三回顾与测验

核心知识点回顾

1. 全局属性清单

属性	一句话用途
contenteditable	让元素可编辑
draggable	允许拖拽
hidden	隐藏元素
spellcheck	开关拼写检查
tabindex	控制 Tab 顺序
title	悬停提示
accesskey	键盘快捷键
dir	文字方向
lang	语言标记
translate	翻译开关
popover	声明式弹出层
inert	禁止交互
autofocus	自动聚焦
autocapitalize	键盘大小写
data-*	自定义数据

2. 事件模型

// 推荐用法
element.addEventListener("click", handler);

// 事件对象
element.addEventListener("click", function (e) {
  e.preventDefault();     // 阻止默认行为
  e.stopPropagation();    // 阻止冒泡
});

// 事件委托
parent.addEventListener("click", function (e) {
  if (e.target.matches(".item")) {
    // 处理点击
  }
});

3. 事件传播

捕获阶段（window → target）
     ↓
目标阶段（target）
     ↓
冒泡阶段（target → window）

4. 常用事件类型

• 鼠标：click、mouseenter、mouseleave、contextmenu
• 键盘：keydown、keyup
• 表单：input、change、focus、blur、submit
• 窗口：load、resize、scroll
• 触摸：touchstart、touchmove、touchend、pointerdown

5. 废弃标签分类

• 布局类：<center>、<font>、<basefont>、<big> → 用 CSS
• 框架类：<frameset>、<frame> → 用 CSS 或 <iframe>
• 功能类：<marquee>、<blink>、<applet> → 用现代技术替代

测验题

题 1

哪个全局属性可以让元素不可交互但保留在 DOM 中？

A. hidden B. inert C. disabled D. readonly

答案：B

inert 让元素及其子元素不能聚焦、不能点击。hidden 是视觉隐藏但技术上仍可交互。

题 2

关于 mouseenter 和 mouseover，以下说法正确的是？

A. 两者都会冒泡 B. mouseenter 不冒泡，mouseover 会冒泡 C. mouseover 不冒泡，mouseenter 会冒泡 D. 两者都不冒泡

答案：B

mouseenter / mouseleave 不冒泡，只在进入/离开元素本身时触发。mouseover / mouseout 会冒泡。

题 3

data-user-name="张三" 在 JavaScript 中如何读取？

A. element.dataset.user-name B. element.dataset.userName C. element.dataset["user-name"] D. element.dataset("user-name")

答案：B

data- 属性名中的短横线转成驼峰命名。data-user-name → dataset.userName。

题 4

以下哪个标签没有被废弃？

A. <center> B. <marquee> C. <iframe> D. <font>

答案：C

<iframe> 仍然是 HTML5 标准的一部分。<center>、<font>、<marquee> 都已废弃。

题 5

事件委托的主要优势是什么？

A. 事件触发更快 B. 减少内存占用，支持动态元素 C. 阻止事件冒泡 D. 支持更多事件类型

答案：B

事件委托通过在父元素上绑定监听器，减少事件处理器数量，且新加子元素无需重新绑定。

题 6

lang="zh-CN" 的作用不包括以下哪项？

A. 屏幕阅读器选择正确发音 B. 浏览器决定是否开启拼写检查 C. 搜索引擎理解页面语言 D. 改变文字方向

答案：D

lang 声明语言，影响发音、拼写检查和 SEO。改变文字方向用 dir 属性（dir="rtl"）。

小结

模块十三的核心要点：

1. 全局属性：优先掌握 contenteditable、hidden、tabindex、lang、dir、data-*
2. 事件处理：用 addEventListener，善用事件委托
3. 事件对象：preventDefault 阻止默认行为，stopPropagation 阻止冒泡
4. 废弃标签：知道哪些不能用，CSS 解决视觉问题

---

下一章进入最后一个模块十四：规范与速查。