事件

什么是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文档：

    
    


    
 click 

当我们点击页面中的div元素时，这个click事件会按照如下的顺序传播：

事件冒泡

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如HTML代码：

    
    


    
 click 

当单击

元素就会以下列顺序触发 click 事件：

事件捕获.jpg

事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行。在触发 DOM 上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。

HTML 事件处理

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。如下面代码中，事件e 将元素id=idname元素的值设置成文本输入字段的值。

...
void updateBadge(Event e) { 
  querySelector('#idname').text = e.target.value;
}