测验

第 8 周概念自测，题目取自本周七篇概念文档（文档对象模型、Document Ready、jquery-dom、事件驱动机制、DOM事件、事件传播、动态元素与事件处理）。提交后立即看答案与解析。

单选

1. DOM 与 JavaScript 是什么关系？

DOM 是 JavaScript 语言自带的内置对象库 DOM 是独立于 JavaScript 的接口标准，浏览器提供实现并与脚本绑定，浏览器之外的语言也能实现它 DOM 是 jQuery 的一部分，须先引入 jQuery 才能使用 DOM 是浏览器专有技术，只在浏览器里存在

2. 脚本执行 o1.style.backgroundColor = 'red' 之后，被修改的是什么？

服务器上的 HTML 源文件 磁盘上的网页文件被改写了 浏览器内存中解析生成的那棵 DOM 树上的节点对象 源文件和内存树都被修改了

3. 课程为什么主张用「节点树 + 标准接口」操纵 HTML，而不是把文档当字符串做子串匹配或正则替换？

浏览器禁止在脚本里使用正则表达式 字符串方式无法表达嵌套结构 节点树配标准化接口简化编程，不同实现遵循统一接口协议，易于跨语言实现 正则表达式的运行速度必然比对象操作慢

4. 脚本放在 head 里写 $("#myButton").click(...)，页面上的按钮点了没反应。原因最可能是？

jQuery 版本不支持 click 方法 浏览器自上而下解析，脚本执行时按钮元素还没被解析，选择器落空，绑定失败 head 里不允许出现 script 标签 按钮的 id 写重复了

5. 只需要在 DOM 结构就绪后修改页面文案，完全不关心图片。应选哪个执行时机？

window.onload，等图片等全部资源加载完再执行 DOMContentLoaded（或 $(document).ready），DOM 就绪即执行，不等待图片 两者时机没有区别，随便选 定时器延迟 3 秒再执行，赌页面已加载好

6. 代码里的 $ 究竟是什么？

JavaScript 语言自带的特殊操作符 浏览器内置的全局对象 一个函数名——jQuery 的别名，js 支持函数名采用特殊字符 一种需要编译器预先展开的语法糖

7. $('div').style.backgroundColor = 'red' 报错了。最可能的原因是？

选择器语法写错了 style 属性在这些元素上不存在 jQuery 版本太老，不支持修改样式 $() 返回的是 jquery object 而非 DOM 节点，不支持 DOM API，应先用 get(0) 等方法转换

8. 「事件」只是指页面上的点击吗？

是，事件专指用户的键鼠操作 不是——定时器到点、页面装载完成等系统状态变化也是事件，程序调用同样能触发事件 是，只有 document 对象上的变化才算事件 不是——任何函数调用都自动构成一次事件

9. 与应用层 while 循环轮询输入相比，事件驱动性能更优的根本原因是？

事件驱动的代码行数更少，所以更快 事件的监听与分派由底层系统实现，把「等待输入」从应用层下沉给系统层 浏览器对事件处理函数的结果做了缓存 轮询写法不被浏览器支持，运行时会降速

10. 三层嵌套的 div，只在内层 div 上点击。绑定了冒泡监听的外层 div 会收到这次点击吗？

不会，事件只到达被点击的那个元素 会——事件从目标元素逐级向上传播，内层、中层、外层依次收到 只有没有内层监听器时外层才能收到 只有同时绑定捕获监听才会收到

11. 点击一个链接，既想阻止它跳转，又想让外层容器的 click 监听照常触发。应该用哪个方法？

stopPropagation() stopImmediatePropagation() preventDefault() jQuery 处理函数里 return false

12. 点击「添加」按钮动态插入的新 li，套用现成的 $('.item').click(...) 绑定后点击无反应。正确的修法是？

把绑定代码再执行一遍，每次添加后重新绑 给每个新 li 加上递增的 id 再逐个绑定 用事件委托——把监听绑到已存在的父级，如 $('#itemList').on('click' 把新 li 改成页面里预置的静态元素

多选

1. DOM API 中的节点（node）一般包含哪些子类型？（多选）

Document——代表整个节点树 Element——元素节点，即标记 Text——内容，即叶子节点 Attr——属性 NodeList——也是节点的一种子类型

2. 按本周文档的口径，下列哪些属于事件的来源？（多选）

用户敲击键盘、点击鼠标 页面装载完成、change、submit 等文档变化 定时器到点等系统内部状态变化 程序调用，如对元素调用 click() 方法或 dispatchEvent 触发自定义事件 编辑器里代码高亮的刷新

3. 关于 $(document).ready 与 window.onload 的对比，正确的说法有哪些？（多选）

ready 在 DOM 结构加载完成即触发，不等待图片 onload 要等图片、CSS、JS 等全部资源加载完成才触发 ready 可以在多个脚本中多次定义，相互不覆盖 onload 多次赋值会相互覆盖，只有最后一次有效 onload 的触发时机通常早于 ready

4. 关于事件委托，正确的说法有哪些？（多选）

动态添加的元素也能被父级上的委托覆盖到，无须重新绑定 大量相似元素改用委托，可省内存、缩短初始化时间 委托目标应选最近的稳定父元素，避免直接选 document 或 body 借助命名空间（如 click.userActions）可以成组移除委托的事件 使用委托后事件就不再冒泡了

5. 表单输入有误时，为什么推荐用页面元素提示而不是 alert()？（多选）

alert() 弹出的是一个窗口，与浏览器窗口同级，都由操作系统管理 alert() 的窗口会与页面争夺输入焦点，焦点难以回到输入框 文档元素（如 div 提示条）不涉及焦点争夺，页面脚本可自由控制 alert() 以后会从 JavaScript 中移除，早晚要改 Web 前端应尽量用文档元素构建各类 UI 元素