DOM
DOM：（文档对象模型）是为了操作文档而定义的一组接口。是 W3C 的标准，即所有浏览器公共遵守的标准
DOM 是语言中立的 API，可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为12种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有的页面标记则表现为一个以特定节点为根节点的树形结构。
可以使用 JavaScript 来操作这个节点树，进而改变底层文档的外观和结构。DOM操作往往是 JavaScript 程序中开销最大的部分，而因访问 NodeList 导致的问题为最多。NodeList 对象都是“动态的”，这就意味着每次访问 NodeList 对象，都会运行一次查询。有鉴于此，最好的办法就是尽量减少 DOM 操作。
DOM 中最基本的节点类型是 Node，用于抽象地表示文档中一个独立的部分，所有其他类型都继承自 Node。DOM 的类型有：Node、Document、Element、Text、Comment、CDATASection、DocumentType、DocumentFragment、Attr
下面主要介绍，各种类型分别提供了哪些 API
1. DOM 节点
1.1 Node （节点）类型
- 每个节点都要 nodeType 属性，用于表明节点类型，节点类型有 Node 类型中定义的下列12个数值常量来表示，任何节点类型必居其一：
Node.ELEMENT_NODE, //返回值： 1
Node.ATTRIBUTE_NODE, // 2
Node.TEXT_NODE, // 3
Node.CDATA_SECTION_NODE, // 4
Node.ENTITY_REFERENCE_NODE, // 5
Node.ENTITY_NODE, // 6
Node.PROCESSING_INSTRUCTION_NODE, // 7
Node.COMMENT_NODE, // 8
Node.DOCUMENT_NODE, // 9
Node.DOCUMENT_TYPE_NODE, // 10
Node.DOCUMENT_FRAGMENT_NODE, // 11
Node.NOTATION_NODE, // 12
比如：console.log(document.nodeType, body.nodeType); // 9 1，
- nodeName 和 nodeValue 属性
<body>
<div id="app">xxx</div>
<script>
const app = document.querySelector("#app");
console.log(
app.childNodes[0].nodeValue, // xxx
app.nodeName, // DIV
);
</script>
</body>
- 节点关系
每一个节点都有一个 childNodes 属性，其中保存着一个 NodeList （类数组）对象
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); // 等同于[1]
var count = someNode.childNodes.length;
文档树中的父节点：parentNode
哥哥节点（同胞节点的上一个）：previousSibling
弟弟节点：nextSibling
父节点的：firstChild 和 lastChild 分别指向子节点的第一个和最后一个
检查是否拥有子节点：hasChildNodes(); // 有 true ,没有 false
-
操作节点
appendChild(newNode)：向 childNodes 列表末尾添加一个节点，返回值为新增的节点
insertBefore(newNode, 参照节点)：向 childNodes 列表中的某个特定位置上插入节点，将新节点插入在参照节点之前，如果参照节点是 null ，则新节点插在最后。
replaceChild(newNode, 要替换的节点)
removeChild(要移除的节点·) -
其它方法
cloneNode()：接收一个参数 true、false，代表深克隆和浅克隆，任何节点都可以使用，克隆之后的节点副本，需要手动插入到文档中
normalize()：处理文本节点，细节不展开说了。
1.2 Document （文档）类型
JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument （继承自 Document 类型）的一个实例，表示整个 HTML 页面。 对象使我们可以对 HTML 页面中的所有元素进行访问。
而且，document 对象是 window 对象的一个属性，因此可通过 window.document 属性对其进行访问，但通常省略 window。
nodeType 的值为9，nodeName的值为 "#document"
- document 对象集合
| 集合 | 描述 | 说明 |
|---|---|---|
| all[] | 提供对文档中所有 HTML 元素访问的数组 | 已较少适用 |
| anchors[] | 对文档中所有 Anchor 对象引用的数组 | 无 |
| forms[] | 对文档中所有 Form 对象引用的数组 | 无 |
| images[] | 对文档中所有 Image 对象引用的数组 | 无 |
| links[] | 对文档中所有 Area 和 Link 对象引用的数组 | 无 |
- document 对象属性
| 属性 | 描述 | 说明 |
|---|---|---|
| cookie | 设置或得到与当前文档有关的所有 cookie | 无 |
| domain | 得到当前文档的域名`````````` | 无 |
| lastModified | 得到文档被最后修改的日期和时间 | 不同浏览器结果可能不同 |
| referrer | 得到载入当前文档的 URL（前一个 URL 地址） | 无 |
| title | 得到当前文档的标题 | 无 |
| URL | 得到当前文档的 URL | 无 |
| documentElement | 该属性始终指向HTML中的元素 | |
| body | 直接指向元素 | |
| doctype | 获取<!DOCTYPE> |
- document 对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 根据元素 id 得到元素（第一个）对象 |
| getElementsByName() | 根据元素 name 得到元素对象的集合 |
| getElementsByTagName() | 根据指定标签名得到元素对象的集合 |
| open() | 打开一个数据流，以收集来自任何 document.write() 或 document.writeln() 方法的输出 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符 |
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据 |
| createElement("div") | 创建元素，参数是标签名，返回被创建的元素 |
| createTextNode("hello") | 参数是文本（特殊字符需转义），返回被创建的文本 |
| createComment("com") | 创建注释节点，插入的位置需是元素的后代 |
| createCDataSection("xx") | XML 中的注释节点 |
| createDocumentFragment(Node) | 创建 文档片段，该片段继承了所有 Node 的方法，它不会出现在 DOM 树中，可用它来减少浏览器的反复渲染，节约性能。 |
| createAttribute() | 创建一个 元素的特性 节点 |
1.3 Element 类型
元素节点
nodeType 的值为 1，parentNode 可能是 Document 或 Element，其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference
| 属性/方法 | 描述 |
|---|---|
| element.accessKey | 设置或返回元素的快捷键。 |
| element.appendChild() | 向元素添加新的子节点，作为最后一个子节点。 |
| element.attributes | 返回元素属性的 NamedNodeMap。 |
| element.childNodes | 返回元素子节点的 NodeList。 |
| element.className | 设置或返回元素的 class 属性。 |
| element.clientHeight | 返回元素的可见高度。 |
| element.clientWidth | 返回元素的可见宽度。 |
| element.cloneNode() | 克隆元素。 |
| element.compareDocumentPosition() | 比较两个元素的文档位置。 |
| element.contentEditable | 设置或返回元素的内容是否可编辑。 |
| element.dir | 设置或返回语言的方向。"ltr"从左至右，"rtl"从右至左 |
| element.firstChild | 返回元素的首个子。 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.getAttributeNode() | 返回指定的属性节点。 |
| element.getElementsByTagName() | 返回拥有指定标签名的所有子元素的集合。 |
| element.getFeature() | 返回实现了指定特性的 API 的某个对象。 |
| element.getUserData() | 返回关联元素上键的对象。 |
| element.hasAttribute() | 如果元素拥有指定属性，则返回true，否则返回 false。 |
| element.hasAttributes() | 如果元素拥有属性，则返回 true，否则返回 false。 |
| element.hasChildNodes() | 如果元素拥有子节点，则返回 true，否则 false。 |
| element.id | 设置或返回元素的 id。 |
| element.innerHTML | 设置或返回元素的内容。 |
| element.insertBefore() | 在指定的已有的子节点之前插入新节点。 |
| element.isContentEditable | 设置或返回元素的内容。 |
| element.isDefaultNamespace() | 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。 |
| element.isEqualNode() | 检查两个元素是否相等。 |
| element.isSameNode() | 检查两个元素是否是相同的节点。 |
| element.isSupported() | 如果元素支持指定特性，则返回 true。 |
| element.lang | 设置或返回元素的语言代码。 |
| element.lastChild | 返回元素的最后一个子元素。 |
| element.namespaceURI | 返回元素的 namespace URI。 |
| element.nextSibling | 返回位于相同节点树层级的下一个节点。 |
| element.nodeName | 返回元素的名称。 |
| element.nodeType | 返回元素的节点类型。 |
| element.nodeValue | 设置或返回元素值。 |
| element.normalize() | 合并元素中相邻的文本节点，并移除空的文本节点。 |
| element.offsetHeight | 返回元素的高度。 |
| element.offsetWidth | 返回元素的宽度。 |
| element.offsetLeft | 返回元素的水平偏移位置。 |
| element.offsetParent | 返回元素的偏移容器。 |
| element.offsetTop | 返回元素的垂直偏移位置。 |
| element.ownerDocument | 返回元素的根元素（文档对象）。 |
| element.parentNode | 返回元素的父节点。 |
| element.previousSibling | 返回位于相同节点树层级的前一个元素。 |
| element.removeAttribute() | 从元素中移除指定属性。 |
| element.removeAttributeNode() | 移除指定的属性节点，并返回被移除的节点。 |
| element.removeChild() | 从元素中移除子节点。 |
| element.replaceChild() | 替换元素中的子节点。 |
| element.scrollHeight | 返回元素的整体高度。 |
| element.scrollLeft | 返回元素左边缘与视图之间的距离。 |
| element.scrollTop | 返回元素上边缘与视图之间的距离。 |
| element.scrollWidth | 返回元素的整体宽度。 |
| element.setAttribute() | 把指定属性设置或更改为指定值。 |
| element.setAttributeNode() | 设置或更改指定属性节点。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 把对象关联到元素上的键。 |
| element.style | 设置或返回元素的 style 属性。 |
| element.tabIndex | 设置或返回元素的 tab 键控制次序。 |
| element.tagName | 返回元素的标签名。 |
| element.textContent | 设置或返回节点及其后代的文本内容。 |
| element.title | 设置或返回元素的 title 属性。 |
| element.toString() | 把元素转换为字符串。 |
| nodelist.item() | 返回 NodeList 中位于指定下标的节点。nodelist.item(0) === nodelist[0] |
| nodelist.length | 返回 NodeList 中的节点数。 |
1.4 Text 类型
文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。
nodeType 的值为 3，nodeName 的值为 "#text"，parentNode 是一个 Element，没有子节点。
可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。对 nodeValue 的修改也会通过 data 反映出来，反之亦然。使用下列方法可以操作节点中的文本。
| 属性/方法 | 描述 |
|---|---|
| nodeValue、data | 设置或返回节点文本 |
| length、nodeValue.lenght、data.length | 节点中字符的数目 |
| appendData(text) | 将 text 添加到节点的末尾 |
| deleteData(offset, count) | 从 offset 指定的位置开始删除 count 个字符 |
| insertData(offset, text) | 在 offset 指定的位置插入 text |
| replaceData(offset, count, text) | 用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本 |
| splitText(offset) | 从 offset 指定的位置将当前文本节点分成两个文本节点。 |
| substringData(offset, count) | 提取从 offset 指定的位置开始到 offset+count 为止处的字符串。 |
1.5 Comment 类型
注释在 DOM 中是通过 Comment 类型来表示的。
nodeType 的值为8，nodeName 的值为 "#comment"，parentNode 可能是 Document 或 Element，没有子节点。
注释节点可以通过其父节点来访问，以下面的代码为例。
<div id="myDiv"><!-- A comment --></div>
在此，注释节点是
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); // "A comment"
1.6 CDATASection 类型
CDATASection 类型只针对基于 XML 的文档，表示的是 CDATA 区域。与 Comment 类似，CDATASection 类型继承自 Text 类型，因此拥有除 splitText() 之外的所有字符串操作方法。
nodeType 为4，nodeName 为"#cdata-section"，nodeValue 是 CDATA 区域中的内容，parentNode可能是 Document 或 Element，没有子节点。
CDATA 区域只会出现在 XML 文档中，因此多数浏览器都会把 CDATA 区域错误的解析为 Comment 或 Element。以下面的代码为例：
这个例子中的
在真正的 XML 文档中，可以使用 document.createCDataSection()来创建 CDATA 区域，只需为其传入节点的内容即可。
1.7 DocumentType 类型
DocumentType 类型在 Web 浏览器中并不常用，仅有 Chrome 4.0、Firefox、Safari 和 Opera 支持它。DocumentType 包含着与文档 doctype 有关的所有信息（即<!DOCTYPE>标签中的信息）。
nodeType 为 10，nodeName 为 doctype 的名字，nodeValue 为 null，parentNode 是 Document，没有子节点。
在 DOM1 级中，DocumentType 对象不能动态创建，而只能通过解析文档代码的方式创建。支持它的浏览器会把 DocumentType 对象保存在 document.doctype 中。DOM1 级描述了 DocumentType 对象的3个属性：
- name：表示文档类型的名称
- entitie：是由文档类型描述的实体的 NamedNodeMap 对象
- notations：是由文档描述的符号的 NamedNodeMap 对象
通常，浏览器中的文档使用的都是 HTML 或 XHTML 文档类型，因而 entities 和 notations 都是空列表（列表中的项来自行内文档类型声明）。但不管怎样，只有 name 属性是有用的。这个属性中保存的是文档类型的名字，也就是出现在DocumentType 的 name 属性中保存的就是 "HTML"alert(document.doctype.name); // "HTML"`
IE 及更早版本不支持 DocumentType，因此 document.doctype 的值始终都是等于 null。可是，这些浏览器会把文档类型声明错误地解释为注释，并且为它创建一个注释节点。IE9 会给 document.doctype 赋正确的对象，但任然不支持访问 DocumentType 类型
1.8 DocumentFragment 类型
在所有节点类型中，只有 DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
nodeType 为11，nodeName 为"#document-fragment"，nodeValue 为 null，parentNode 为 null，子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference。
var fragment = document.createDocumentFragment();
文档片段继承了 Node 的所有方法，通常用于执行那些针对文档的 DOM 操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过 appendChild() 或 insertBefore() 将文档片段中的内容添加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会讲文档片段的所有子节点添加到相应的位置上；文档片段本身永远不会成为文档树的一部分。来看下面的 HTML 示例代码：<ul id="myList"></ul>
假设我们想为这个<ul>元素添加3个列表项。如果逐个地添加列表项，将会导致浏览器反复渲染新信息。为避免这个问题，可以像下面这样使用一个文档片段来保存创建的列表项，然后再一次性将他们添加到文档中。
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i = 0; i < 3; i++) {
li = document.createElement("li");
li.appendChild(document.createTextNode("Item" + (i + 1)));
fragment.appendChild(li);
};
ul.appendChild(fragment);
1.9 Attr 类型
元素的特性在 DOM 中以 Attr 类型来表示。在所有浏览器中（包括 IE8）,都可以访问 Attr 类型的构造函数和原型。从技术角度讲，特性就是存在于元素的 attribute 属性中的节点。
nodeType 为2，nodeName 为特性的名称，nodeValue 为特性的值l，parentNode 为 null，在HTML 中没有子节点，在 XML 中子节点可以是 Text 或 EntityReference。
尽管它们也是节点，但特性却不被认为是 DOM 文档树的一部分。开发人员最常用的是 getAttrbute()、setAttrbute() 和 removeAttrbute() 方法，很少直接引用特性节点，因为这些方法远比操作特性节点更方便。
Attr 对象有3个属性：
- name：特性名称（与 nodeName 的值相同）
- value：特性的值（与 nodeValue 的值相同）
- specified：是个布尔值，用以区别特性是在代码中指定的，还是默认的。
使用 document.createAttribute() 并传入特性的名称可以创建新的特性节点。例如：要为元素添加 align 特性，可以使用下列代码：
var attr = document.createAttribute("align"); // 创建新特性节点，并未其 name 属性赋值 "align"
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes['align'].value); // left
alert(element.getAttributeNode('align').value); // left
alert(element.getAttribute('align')); // left
2. DOM 事件
查看我的博客园链接
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。
提示： 在 W3C 2 级 DOM 事件中规范了事件模型。
2.1 鼠标事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |
2.2 键盘事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| onkeydown | 某个键盘按键被按下。 | 2 |
| onkeypress | 某个键盘按键被按下并松开。 | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
2.3 框架/对象（Frame/Object）事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| onabort | 图像的加载被中断。( | 2 |
| onbeforeunload | 该事件在即将离开页面（刷新或关闭）时触发 | 2 |
| onerror | 在加载文档或图像时发生错误。( | |
| onhashchange | 该事件在当前 URL 的锚部分发生修改时触发。 | |
| onload | 一张页面或一幅图像完成加载。 | 2 |
| onpageshow | 该事件在用户访问页面时触发 | |
| onpagehide | 该事件在用户离开当前网页跳转到另外一个页面时触发 | |
| onresize | 窗口或框架被重新调整大小。 | 2 |
| onscroll | 当文档被滚动时发生的事件。 | 2 |
| onunload | 用户退出页面。 ( 和 ) | 2 |
2.4 表单事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| onblur | 元素失去焦点时触发 | 2 |
| onchange | 该事件在表单元素的内容改变时触发( , , , 和 | 2 |
| onfocus | 元素获取焦点时触发 | 2 |
| onfocusin | 元素即将获取焦点时触发 | 2 |
| onfocusout | 元素即将失去焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) | |
| onselect | 用户选取文本时触发 ( 和 | 2 |
| onsubmit | 表单提交时触发 | 2 |
2.5 剪贴板事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| oncopy | 该事件在用户拷贝元素内容时触发 | |
| oncut | 该事件在用户剪切元素内容时触发 | |
| onpaste | 该事件在用户粘贴元素内容时触发 |
2.6 打印事件
| 属性 | 描述 | DOM级别 |
|---|---|---|
| onafterprint | 该事件在页面已经开始打印，或者打印窗口已经关闭时触发 | |
| onbeforeprint | 该事件在页面即将开始打印时触发 |
2.7 拖动事件
| 事件 | 描述 | DOM级别 |
|---|---|---|
| ondrag | 该事件在元素正在拖动时触发 | |
| ondragend | 该事件在用户完成元素的拖动时触发 | |
| ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
| ondragleave | 该事件在拖动元素离开放置目标时触发 | |
| ondragover | 该事件在拖动元素在放置目标上时触发 | |
| ondragstart | 该事件在用户开始拖动元素时触发 | |
| ondrop | 该事件在拖动元素放置在目标区域时触发 |
2.8 多媒体（Media）事件
| 事件 | 描述 | DOM级别 |
|---|---|---|
| onabort | 事件在视频/音频（audio/video）终止加载时触发。 | |
| oncanplay | 事件在用户可以开始播放视频/音频（audio/video）时触发。 | |
| oncanplaythrough | 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。 | |
| ondurationchange | 事件在视频/音频（audio/video）的时长发生变化时触发。 | |
| onemptied | 当期播放列表为空时触发 | |
| onended | 事件在视频/音频（audio/video）播放结束时触发。 | |
| onerror | 事件在视频/音频（audio/video）数据加载期间发生错误时触发。 | |
| onloadeddata | 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。 | |
| onloadedmetadata | 事件在指定视频/音频（audio/video）的元数据加载后触发。 | |
| onloadstart | 事件在浏览器开始寻找指定视频/音频（audio/video）触发。 | |
| onpause | 事件在视频/音频（audio/video）暂停时触发。 | |
| onplay | 事件在视频/音频（audio/video）开始播放时触发。 | |
| onplaying | 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。 | |
| onprogress | 事件在浏览器下载指定的视频/音频（audio/video）时触发。 | |
| onratechange | 事件在视频/音频（audio/video）的播放速度发送改变时触发。 | |
| onseeked | 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。 | |
| onseeking | 事件在用户开始重新定位视频/音频（audio/video）时触发。 | |
| onstalled | 事件在浏览器获取媒体数据，但媒体数据不可用时触发。 | |
| onsuspend | 事件在浏览器读取媒体数据中止时触发。 | |
| ontimeupdate | 事件在当前的播放位置发送改变时触发。 | |
| onvolumechange | 事件在音量发生改变时触发。 | |
| onwaiting | 事件在视频由于要播放下一帧而需要缓冲时触发。 |
2.9 动画事件
| 事件 | 描述 | DOM级别 |
|---|---|---|
| animationend | 该事件在 CSS 动画结束播放时触发 | |
| animationiteration | 该事件在 CSS 动画重复播放时触发 | |
| animationstart | 该事件在 CSS 动画开始播放时触发 |
2.10 过渡事件
| 事件 | 描述 | DOM |
|---|---|---|
| transitionend | 该事件在 CSS 完成过渡后触发。 |
2.11 其他事件
| 事件 | 描述 | DOM级别 |
|---|---|---|
| onmessage | 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 | |
| onmousewheel | 已废弃。 | 使用 onwheel 事件替代 |
| ononline | 该事件在浏览器开始在线工作时触发。 | |
| onoffline | 该事件在浏览器开始离线工作时触发。 | |
| onpopstate | 该事件在窗口的浏览历史（history 对象）发生改变时触发。 | |
| onshow | 该事件当 元素在上下文菜单显示时触发 | |
| onstorage | 该事件在 Web Storage(HTML 5 Web 存储)更新时触发 | |
| ontoggle | 该事件在用户打开或关闭 | |
| onwheel | 该事件在鼠标滚轮在元素上下滚动时触发 |
2.12 事件对象
2.12.1 常量
| 静态变量 | 描述 | DOM级别 |
|---|---|---|
| CAPTURING-PHASE | 当前事件阶段为捕获阶段(1) | 1 |
| AT-TARGET | 当前事件是目标阶段,在评估目标事件(1) | 2 |
| BUBBLING-PHASE | 当前的事件为冒泡阶段 (3) | 3 |
2.12.2 属性
| 属性 | 描述 | DOM级别 |
|---|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 | 2 |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 | 2 |
| currentTarget | 返回其事件监听器触发该事件的元素。 | 2 |
| eventPhase | 返回事件传播的当前阶段。 | 2 |
| target | 返回触发此事件的元素（事件的目标节点）。 | 2 |
| timeStamp | 返回事件生成的日期和时间。 | 2 |
| type | 返回当前 Event 对象表示的事件的名称。 | 2 |
2.12.3 方法
| 方法 | 描述 | DOM级别 |
|---|---|---|
| initEvent() | 初始化新创建的 Event 对象的属性。 | 2 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 | 2 |
| stopPropagation() | 不再派发事件。 | 2 |
2.13 目标事件对象
2.13.1 方法
| 方法 | 描述 | DOM级别 |
|---|---|---|
| addEventListener() | 允许在目标事件中注册监听事件(IE8 = attachEvent()) | 2 |
| dispatchEvent() | 允许发送事件到监听器上 (IE8 = fireEvent()) | 2 |
| removeEventListener() | 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) | 2 |
2.14 事件监听对象
2.14.1 方法
| 方法 | 描述 | DOM级别 |
|---|---|---|
| handleEvent() | 把任意对象注册为事件处理程序 | 2 |
2.15 文档事件对象
2.15.1 方法
| 方法 | 描述 | DOM级别 |
|---|---|---|
| createEvent() | 2 |
2.16 鼠标/键盘事件对象
2.16.1 属性
| 属性 | 描述 | DOM级别 |
|---|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 | 2 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 | 2 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 | 2 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 | 2 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 | 2 |
| Location | 返回按键在设备上的位置 | 3 |
| charCode | 返回onkeypress事件触发键值的字母代码。 | 2 |
| key | 在按下按键时返回按键的标识符。 | 3 |
| keyCode | 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
| which | 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 | 2 |
| relatedTarget | 返回与事件的目标节点相关的节点。 | 2 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 | 2 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 | 2 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 | 2 |
2.16.2 方法
| 方法 | 描述 | DOM级别 |
|---|---|---|
| initMouseEvent() | 初始化鼠标事件对象的值 | 2 |
| initKeyboardEvent() | 初始化键盘事件对象的值 | 3 |
3. DOM 扩展
......