事件
什么是DOM
- DOM 是 W3C（万维网联盟）的标准。
- DOM 定义了访问 HTML 和 XML 文档的标准：
- “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它- 允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
- W3C DOM 标准被分为 3 个不同的部分：
-- 核心 DOM - 针对任何结构化文档的标准模型
-- XML DOM - 针对 XML 文档的标准模型
-- HTML DOM - 针对 HTML 文档的标准模型
什么是 HTML DOM
- HTML DOM 是：
-- HTML 的标准对象模型
-- HTML 的标准编程接口
-- W3C 标准 - HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
Html DOM 节点
- 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
-- 整个文档是一个文档节点
-- 每个 HTML 元素是元素节点
-- HTML 元素内的文本是文本节点
-- 每个 HTML 属性是属性节点
-- 注释是注释节点
HTML DOM 节点树
- 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
【DOM】
什么是事件
事件是文档或浏览器窗口中发生的一些特定的交互瞬间，我们使用监听器（listener/hanlder）来预订事件，当事件触发时，执行相对应的代码，这种就是传统软件工程中被成为观察者模式的模型，这种模型支持页面的行为与页面的UI之间的松散耦合。如JavaScript与HTML之间通过事件来进行交互。
事件流
当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
而事件流有两种：
- 事件冒泡
- 事件捕获
事件冒泡
IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点。
如HTML文档：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div> click </div>
</body>
</html>
当我们点击页面中的div元素时，这个click事件会按照如下的顺序传播：
事件冒泡
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div> click </div>
</body>
</html>
当单击 <div> 元素就会以下列顺序触发 click 事件：
事件捕获.jpg
事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。在触发 DOM 上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。
HTML 事件处理
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。如下面代码中，事件e 将元素id=idname元素的值设置成文本输入字段的值。
...
void updateBadge(Event e) {
querySelector('#idname').text = e.target.value;
}
