文档对象模型（DOM）

介绍

文档对象模型DOM是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象。方便编程语言与页面交互。
DOM 是用于建立网站的 Web API。设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的 API 获得。其通常通过 JavaScript来使用，也可以通过其他的语言来使用。

数据类型

下面的表格大致描述了dom中常用的数据类型。会在后文对其进行更详细的介绍。

数据类型	描述
Node	位于文档中的每个对象都是某种类型的节点。在一个 `HTML` 文档中，一个对象可以是一个元素节点，也可以是一个文本节点或属性节点。
Document	当一个成员返回 `Document` 对象，这个 `Document` 对象就是对象本身。
Element	`Element` 类型是基于 `Node` 的。其指的是一个元素或一个由 `DOM API` 的成员返回的 `Element` 类型的节点。。
HTMLElement	`HTMLElement` 类型基于`Element`，表示所有的 `HTML` 元素。

Node

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。
比如Document, Element, Attr, CharacterData等。
node 继承于 EventTarget 。EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器，详情看这里。

属性

属性	介绍
Node.childNodes	只读，返回一个包含了该节点所有子节点的实时的`NodeList`。 `NodeList` 是动态变化的。如果该节点的子节点发生了变化，`NodeList`对象就会自动更新。
Node.firstChild	只读，返回该节点的第一个子节点`Node`，如果该节点没有子节点则返回`null`。
Node.isConnected	只读，该节点与 `DOM` 树连接返回 `true`, 否返回 `false`。
Node.lastChild	只读，返回该节点的最后一个子节点`Node`，如果该节点没有子节点则返回`null`。
Node.nextSibling	只读，返回与该节点同级的下一个节点 `Node`，如果没有返回`null`。
Node.nodeName	只读，若为元素节点，`nodeName` 属性和 `tagName` 属性返回相同的值，若是文本节点，`nodeName` 属性会返回 `"#text"`，而 `tagName` 属性会返回 `undefined`。
Node.nodeType	只读，返回一个与该节点类型对应的无符号短整型。常用的值如下： 1：元素节点`element`，对应常量`Node.ELEMENT_NODE`; 2：属性节点`attr`，对应常量`Node.ATTRIBUTE_NODE`; 3：文本节点`text`，对应常量`Node.TEXT_NODE`; 8：注释节点`Comment`，对应常量`Node.COMMENT_NODE`; 9：文档节点`document`，对应常量`Node.DOCUMENT_NODE`; 11：文档片断节点`DocumentFragment`，对应常量`Node.DOCUMENT_FRAGMENT_NODE`; 10：文档类型节点`DocumentType`，对应常量`Node.DOCUMENT_TYPE_NODE`。
Node.parentNode	只读，返回指定节点的父节点。元素的父节点可能是元素`Element`节点、文档`Document`节点、或是文档碎片`DocumentFragment`节点。若没有这样的节点，返回 `null`。
Node.parentElement	只读，返回当前节点的父节点`Element`，若该元素没有父节点，或父节点不是 `DOM` 元素，则返回 `null`。
Node.previousSibling	只读，返回前一个同辈节点 `Node` ，不存在返回 `null`。
Node.textContent	返回或设置一个元素内所有子节点及其后代的文本内容，包括 `<script>` 和 `<style>` 元素中的。可以防止 `XSS` 攻击。

方法

方法	介绍
Node.cloneNode(`deep`)	`deep`:可选，默认`false`。 `true`：节点的所有后代节点也会被克隆， `false`：只克隆节点本身。返回`Node`副本节点的克隆对象，不会加入到 `DOM` 中。
Node.compareDocumentPosition(`otherNode`)	返回一个表示 `Node` 和 `otherNode` 在 `Document` 中关系的整数值。可能为： 1 常量名`DOCUMENT_POSITION_DISCONNECTED`：不在同一文档中; 2 常量名`DOCUMENT_POSITION_PRECEDING`：`otherNode` 在 `node` 之前; 4 常量名`DOCUMENT_POSITION_FOLLOWING`：`otherNode` 在 `node` 之后; 8 常量名`DOCUMENT_POSITION_CONTAINS`；`otherNode` 包含 `node`; 16 常量名`DOCUMENT_POSITION_CONTAINED_BY`：`otherNode` 被 `node` 包含。
Node.contains(`otherNode`)	返回一个布尔值，如果 `otherNode` 包含在节点 `Node` 返回 `true`，否返回 `false`。
Node.getRootNode(`options`)	`options`：可选默认`false` 是否跳过 `shadow Root` 节点。返回根节点。
Node.hasChildNodes()	返回布尔值，是否有子节点.
Node.insertBefore(`newNode`, `referenceNode`)	`newNode`：在子节点中插入的节点。 `referenceNode`：参考节点，会在其之前插入 `newNode` 节点。如果为 `null`，`newNode` 将被插入到所有子节点的末尾。不是可选参数。必须显式传递 `Node` 或 `null`。返回添加的子节点。
Node.removeChild(`child`)	`child`：要删除的子节点。移除一个子节点 `child` ，并返回移除的节点。只要对被移除的子节点保持引用，其仍然存在于内存中，但不再是 `DOM` 的一部分。在以后的代码中仍可重复使用。如果不存储返回值，也不保留其他引用，该节点将在短时间内在内存中自动删除。
Node.replaceChild(`newChild`, `oldChild`)	`newChild`：用来替换 `oldChild` 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。 `oldChild`：被替换掉的原始节点。替换当前节点的一个子节点，并返回被替换掉的节点。

Document

Document 表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树。
DOM 树包含了像 <body>、<table> 这样的元素，以及大量其他元素。其向网页文档本身提供了全局操作功能。
其承自 Node 和 EventTarget 接口。

属性

属性	介绍
Document.activeElement	只读，返回一个目前处于聚焦状态的 `Element`。
Document.body	返回当前文档的 `<body>` 节点。
Document.characterSet	只读，返回文档正在使用的字符集。
Document.childElementCount	只读，返回文档正在使用的子元素的数量。
Document.children	只读，返回当前文档`HTMLCollection`对象的子元素。
Document.documentElement	只读，返回当前文档`Element` 对象的直接子节点。
Document.documentURI	只读，以字符串的类型，返回当前文档的路径。
Document.firstElementChild	只读，返回当前文档的第一个子元素。
Document.forms	只读，返回当前文档中的 `<form>`元素的一个类型的集合。
Document.fullscreenElement	只读，返回文档中正处于全屏模式的元素。
Document.head	只读，返回当前文档的 `<head>` 元素。
Document.hidden	只读，返回一个布尔值，表明当前页面是否隐藏。
Document.images	只读，返回当前文档中所包含的图片的 `HTMLCollection`。
Document.lastElementChild	只读，返回当前文档的最后一个子元素。
Document.links	只读，返回一个包含文档中所有超链接的 `HTMLCollection`。
Document.pictureInPictureElement	只读，返回文档中正处于画中画模式的 `Element`。
Document.pictureInPictureEnabled	只读，若画中画特性可用，则返回 `true`。
Document.visibilityState	只读, 返回`document`的可见性。可用的值如下： `visible` : 此时页面内容至少是部分可见。页面在前景标签页中，并且窗口没有最小化。 `hidden` : 此时页面对用户不可见。文档处于背景标签页、处于最小化状态或操作系统正处于锁屏状态。 `prerender` : 页面此时正在渲染中。

HTML 文件的 Document 接口继承自 HTMLDocument 接口。扩展了这些属性：

属性	介绍
Document.cookie	返回一个使用分号分隔的 `cookie` 列表，或设置一个 `cookie`。
Document.defaultView	只读，返回与文档关联的 `window` 对象，如果没有可用的对象，则返回 `null`。
Document.designMode	控制整个文档是否可编辑。有效值为 `"on"`、`"off"`。默认为 `"off"`。
Document.dir	获取或设置文档的文字方向，有效值为 `'rtl'`、`'ltr'`。
Document.lastModified	只读，返回文档最后修改时间的字符串，可转换为`Date`。
Document.location	只读，返回一个 `Location` 对象，包含有文档的 `URL` 相关的信息。
Document.readyState	只读，返回当前文档的加载状态。可以为： `loading`（正在加载）：`document` 仍在加载。 `interactive`（可交互）：文档已被解析，但图像，样式表和框架之类的子资源仍在加载。 `complete`（完成）：文档和所有子资源已完成加载。
Document.referrer	只读，返回来源页面的 `URI`字符串。
Document.title	获取或设置 `document` 对象的标题。
Document.URL	只读，返回 `document` 对象的 `URL` 字符串。

方法

方法	介绍
Document.adoptNode(`externalNode`)	`externalNode`：将要从另一份文档中转移的节点。将`externalNode`从另一个文档转移至调用该方法的文档中。被转移的节点及其子树将会从原始文档中移除，并且它们的 `ownerDocument` 会变更为当前文档。然后节点将被插入到当前文档中。返回导入文档的作用域中复制的`mportedNode`。
Document.append(`...paramN`)	`...paramN`：要插入的一组 Node 或字符串对象。在文档的最后一个子节点后插入一组节点对象或字符串对象。字符串对象被插入为相同文本节点，不会被解析。返回 `undefined` 。
Document.createAttribute(`name`)	`name`：要创建属性对象的属性名。返回一个新的属性节点 `Attr` 。 `Attr` 添加 `value` 后可用于为元素添加对应的属性。
Document.createDocumentFragment()	创建并返回一个新的空白的文档片段 `DocumentFragment`。其被作为一个轻量版的 `Document` 使用，最大的区别是其变化不会触发 `DOM` 树的重新渲染，用于性能优化。
Document.createElement(`tagName`)	`tagName`：要创建元素类型的字符串。创建并返回一个由标签为 `tagName` 类型为 `Element`的 `HTML` 元素。
Document.createElementNS(`namespaceURI`, `qualifiedName`)	`namespaceURI`：与元素相关联的命名空间 `URI` 的字符串。 `qualifiedName`：指定要创建的元素的类型的字符串。创建并返回一个具有指定的命名空间 `URI` 和限定名称的 `Element` 元素。
Document.createTextNode(`str`)	`str`：要放入文本节点的字符串。创建并返回包含`str`内容的文本节点。该方法将自动转义 `HTML` 字符。
Document.getElementById(`id`)	方法返回一个表示 `id` 属性与字符串相匹配的元素的 `Element` 对象。
Document.getElementsByClassName(`class_name`)	返回一个包含所有指定`class_name`的子元素的伪数组对象。其可以在任何元素上调用。调用这个方法的元素将作为本次查找的根元素。
Document.getElementsByTagName(`tag_name`)	`tag_name`：要检索的标签名，可以使用`*`来表示所有元素返回一个包含所有`tag_name`标签名元素的 `HTML` 集合。
Document.importNode(`externalNode`, `deep`)	`externalNode`：要拷贝的`Node`节点。 `deep`：(可选)是否要拷贝整个 `DOM` 子树。默认为 `false`。返回`externalNode`的拷贝。
Document.prepend(`...paramN`)	`...paramN`：要插入的 `Node` 或字符串。在第一个子节点前插入一个 `...paramN`。返回 `undefined` 。
Document.querySelector(`selectors`)	`selectors`：`CSS` 选择器字符串返回文档中 `selectors` 选择器匹配的第一个 `Element` 对象。若找不到匹配项返回 `null` 。
Document.querySelectorAll(`selectors`)	`selectors`：`CSS` 选择器字符串返回文档中 `selectors` 选择器匹配的所有 `Element` 对象，并装入一个静态 `NodeList`中返回，若找不到匹配项返回空 `NodeList`。

HTML 文件的 Document 接口继承自 HTMLDocument 接口。扩展了这些方法：

方法	介绍
Document.close()	关闭用于写入的文档流。
Document.open()	打开用于写入的文档流。将会导致所有事件监听器与节点被清除。
Document.getElementsByName(`name`)	`name`：要查找元素 `name` 属性的值。返回一个包含 `name` 属性的所有元素的实时 `NodeList` 集合。
Document.hasFocus()	方法返回 `Boolean`，表明当前文档或者当前文档内的节点是否获得了焦点。

Element

Document 中的所有元素对象都继承自Element。Element具有各种元素共有的方法和属性。
Element继承于 Node。

属性

Element 从其父接口 Node 以及该接口的父接口 EventTarget 继承了一些属性如下：

属性	介绍
Element.attributes	只读，返回一个 `NamedNodeMap` 对象，其中包含相应 `HTML` 元素的指定属性。
Element.childElementCount	只读，返回此元素的子元素个数，不包括空节点。
Element.children	只读，返回此元素的子元素，包括空节点。
Element.classList	只读，返回一个 `DOMTokenList` ，其中包含该元素所有的 `class` 属性。
Element.className	返回一个字符串，表示这个元素的类。
Element.clientHeight	只读，返回代表元素内部高度的数值。
Element.clientLeft	只读，返回代表元素左边界宽度的数值。
Element.clientTop	只读，返回代表元素顶部边框宽度的数值。
Element.clientWidth	只读，返回代表元素内部宽度的数值。
Element.firstElementChild	只读，返回除空元素之外的第一个子元素。
Element.id	返回一个字符串，表示此元素的 `id` 值。
Element.innerHTML	返回一个字符串，表示元素内容。
Element.lastElementChild	只读，返回除空元素之外的最后一个子元素。
Element.localName	只读，一个字符串，代表元素限定名称的本地部分。
Element.namespaceURI	只读，元素对应的命名空间 `URI`，如果没有则返回 `null`。
Element.nextElementSibling	只读，一个 `Element`，树中紧跟给定元素的元素，如果没有同级节点，则为 `null`。
Element.outerHTML	一个字符串，代表元素的标记。作为 `setter` 使用时，将用从给定字符串解析出的节点替换元素。
Element.part	代表元素的部分标识符，以 `DOMTokenList`的形式返回。
Element.scrollHeight	只读，元素滚动视图高度的数值。
Element.scrollLeft	元素左滚动偏移量的数值。
Element.scrollLeftMax	非标准只读，元素可能的最大左滚动偏移值。
Element.scrollTop	元素顶部垂直滚动的像素数。
Element.scrollTopMax	非标准只读，元素可能的最大顶部滚动偏移值。
Element.scrollWidth	只读，代表元素滚动视图宽度的数值。
Element.tagName	只读，返回一个字符串，包含给定元素的标签名称。

更多属性参考

方法

Element 继承 Node 及其父接口 EventTarget 的方法。

方法	介绍
Element.before(`node1`, `node2`, … , `nodeN`)	在其父节点的子节点列表中插入一些 `Node` 或 `DOMString` 对象。插入位置为该节点之前。`DOMString` 对象会被以 `Text` 的形式插入。
Element.after(`node1`, `node2`, … , `nodeN`)	在其父节点的子节点列表中插入一些 `Node` 或 `DOMString` 对象。插入位置为该节点之后。`DOMString` 对象会被以 `Text` 的形式插入。
Element.animate(`keyframes`, `options`)	`keyframes`：关键帧对象数组，或一个关键帧对象。 `options`:动画持续时间的整数，以毫秒为单位。将动画应用于元素，然后运行动画。并返回一个新建的 `Animation` 对象实例。
Element.append(`param1`, `param2`, …, `paramN`)	在 `Element` 的最后一个子节点之后插入一组 `Node` 对象或字符串对象。被插入的字符串对象等价为 `Text` 节点。
Element.closest(`selectors`)	`selectors`：指定的选择器。返回匹配特定选择器且离当前元素最近的祖先元素或当前元素本身。如果匹配不到，则返回 `null`。
Element.getAttribute(`attributeName`)	`attributeName`：字符串，指定的属性值。返回元素上一个指定的属性值。如果指定的属性不存在，则返回 `null`。
Element.getAttributeNames()	返回一个`Array`，其中包含元素的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。
Element.getAttributeNode(`attrName`)	`attrName`：字符串，属性名。返回`Attr`节点，表示元素的`attrName`属性。
Element.getBoundingClientRect()	返回`DOMRect`对象，其提供了元素的大小及其相对于视口的位置。
Element.getElementsByClassName(`ClassName`)	返回一个即时更新的`HTMLCollection`，包含了所有拥有指定 `ClassName` 的子元素。
Element.getElementsByTagName(`TagName`)	返回一个即时更新的`HTMLCollection`，包含了所有拥有指定 `TagName` 的子元素。
Element.hasAttribute(`name`)	返回元素的`name`属性是否存在的布尔值。
Element.hasAttributes()	返回布尔值，表示是否具有 `HTML` 属性。
Element.insertAdjacentElement(`position`, `element`)	`position`：插入位置的字符串其需为以下字符串之一。`beforebegin`该之前，`afterbegin`该元素的第一个子节点之前，`beforeend`该元素的最后一个子节点之后，`afterend`该元素之后。 `element`：要插入的元素。返回插入的元素，插入失败则返回 `null`。
Element.insertAdjacentHTML(`position`, `text`)	`position`：同上 `text`：要被解析为 HTML 的文本。返回插入的元素，插入失败则返回 `null`，其避免了额外的序列化步骤，使其比直接使用 `innerHTML` 操作更快。
Element.prepend(`param1`, `param2`, …, `paramN`)	在第一个子节点之前插入一组 `Node` 对象或字符串。无返回值。
Element.querySelector(`selectors`)	`selectors`：选择器。返回与`selectors`匹配的元素的后代的第一个元素。
Element.querySelectorAll(`selectors`)	返回一个静态的 `NodeList`，其包含所有匹配元素的节点。
Element.remove(`param`)	删除指定节点。
Element.removeAttribute(`attrName`)	移除当前元素上`attrName`的属性。
Element.replaceChildren(`param1`, `param2`, …, `paramN`)	替换该元素子节点。若没有指定替代对象时，所有后代都将被清空。
Element.replaceWith(`param1`, `param2`, …, `paramN`)	替换该元素父节点的子节点包括其本身。若没有指定替代对象时，所有子节点都将被清空。
Element.scroll(`x-coord`, `y-coord`)/ Element.scroll(`options`)	`x-coord`：水平轴的像素。 `y-coord`：垂直轴的像素。 `options`：包含以下参数的对象。 `top`-水平轴的像素; `left`-垂直轴的像素; `behavior`-其中 `smooth` 表示平滑滚动并产生过渡效果、`auto` 或缺省值会直接跳转到目标位置，没有过渡效果。使元素滚动到某个特定坐标。
Element.scrollBy(`x-coord`, `y-coord`)/ Element.scrollBy(`options`)	参数同上。使元素滚动一段特定距离。
Element.scrollTo(`x-coord`, `y-coord`)/ Element.scrollTo(`options`)	参数同上。使界面滚动到给定元素的指定坐标位置。
Element.scrollIntoView(`alignToTop`)/ Element.scrollIntoView(`scrollIntoViewOptions`)	`alignToTop`：可选，一个布尔值，默认为`true`。`true`元素的顶端将和其所在滚动区的可视区域的顶端对齐。`false`元素的底端将和其所在滚动区的可视区域的底端对齐。 `scrollIntoViewOptions`：可选，一个包含下列属性的对象。 `behavior`-定义滚动是立即的还是平滑的动画，其中`smooth`平滑的动画、`instant`通过一次跳跃立刻发生、`auto`由 `scroll-behavior` 的计算值决定; `block`-定义垂直方向的对齐，`start`、`center`、`end` 或 `nearest` 默认为 `start`; `inline`-定义水平方向的对齐，`start`、`center`、`end` 或 `nearest`默认为 `nearest`。滚动元素的父容器，使元素可见。
Element.setAttribute(`name`, `value`)	`name`：属性名。 `value`：属性值。设置指定元素上的`name`属性为`value`。
Element.setAttributeNode(`attribute`)	`attribute`：添加`Attr`的节点。添加属性节点。

HTMLElement

HTMLElement 接口表示所有的 HTML 元素。
HTMLElement继承自 Element 。

属性

属性	介绍
HTMLElement.contentEditable	`String`类型，表明元素是否是可编辑。可能为以下几种值：`true`：可编辑。 `false`：不可编辑。 `plaintext-only`：可以纯文本格式编辑，富文本格式会被禁用。 `inherit`：继承了其父元素的可编辑状态。
HTMLElement.dir	`String`类型，表明元素的文本书写方向。可能为以下几种值：`ltr`：表示从左到右。 `rtl`：表示从右到左。 `auto`：表示元素的方向必须根据元素的内容来确定。
HTMLElement.draggable	元素是否可以拖拽。
HTMLElement.hidden	元素是否隐藏。
HTMLElement.lang	`String`类型，元素属性值或文本内容的基语言。 `en`：英语、`zh-cn`：简体中文、`ja`：日语。
HTMLElement.offsetHeight	只读，元素自身可视高度加上上下内边距和边框的像素值。
HTMLElement.offsetWidth	只读，元素自身可视宽度加上左右内边距和边框的像素值。
HTMLElement.offsetTop	只读，元素顶部相对于父节点顶部的像素值。
HTMLElement.offsetLeft	只读，元素左上角相对于父节点的左边界偏移的像素值。
HTMLElement.offsetParent	只读，元素的父元素。
HTMLElement.style	只读，元素的内联样式以实时的`CSSStyleDeclaration`对象表示。
HTMLElement.title	元素的 `title` 属性。
HTMLElement.translate	元素是否可以被翻译。

事件

事件是由 DOM 元素产生的资源，可以由 JavaScript 代码操控。

EventTarget

EventTarget 接口由可以接收事件、并且可以创建侦听器的对象实现。
Element 及其子项、document 与 window 是最常用的事件目标。

注册事件

EventTarget.addEventListener(type, listener, useCapture)

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。可以拿到表示点击对象的 Event 。
useCapture：(可选)布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（在冒泡阶段触发）。
其除了是一个布尔值，还可以是一个对象还可以是一个属性配置对象。该对象有以下属性：
- capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
- once：布尔值，表示监听函数是否只触发一次，然后就自动移除。
- passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

移除事件

EventTarget.removeEventListener(type, listener)
用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。其参数与addEventListener一致。
移除的监听函数，必须是addEventListener方法添加的那个监听函数，且必须在同一个元素节点，否则无效。

EventTarget.dispatchEvent()

EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回false，否为true。

target.dispatchEvent(event)
其的参数为Event对象。若参数为空，或不是一个有效的事件对象，将报错。

// 当前节点触发了click事件。
para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);
// 根据dispatchEvent方法的返回值，判断事件是否被取消了。
var canceled = !cb.dispatchEvent(event);
if (canceled) {
console.log('事件取消');
} else {
console.log('事件未取消');
}

Event

事件发生以后，会产生一个事件对象Event，作为参数传给监听函数。所有的事件都是这个对象的实例，或继承了Event.prototype对象。

构造函数

new Event(type, options)
构造函数接受两个参数。

type：字符串，表示事件的名称。
options：(可选)是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
- bubbles：(可选)布尔值，默认为false，表事件对象是否冒泡。
- cancelable：(可选)布尔值，默认为false，表事件是否可以被取消。
- composed：(可选)布尔类型，默认为 false，表事件是否会在影子 DOM 根节点之外触发侦听器。

实例属性

属性	介绍
Event.bubbles	只读，表示该事件是否会在 `DOM` 中冒泡。
Event.cancelable	只读，表示事件是否可以取消。
Event.currentTarget	只读，返回一个`EventTarget`，表示当前事件处理器所附加的对象。子元素被触发也只返回父元素。
Event.defaultPrevented	只读,表示是否取消了事件的默认行为。
Event.target	只读，返回一个`EventTarget`，表示当前事件处理器所的对象。谁触发返回谁。
Event.type	只读，返回字符串，表示事件类型的名称。

实例方法

方法	介绍
Event.preventDefault()	取消浏览器对当前事件的默认行为。事件对象的`cancelable`属性为`true`才能生效。
Event.composedPath()	返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。例：`[p, div, body, html, document, Window]`。
Event.stopPropagation()	阻止事件在 `DOM` 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
Event.stopImmediatePropagation()	阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。

鼠标事件

事件	介绍
click	按下鼠标时触发。
dblclick	在同一个元素上双击鼠标时触发。
mousedown	按下鼠标键时触发。
mouseup	释放按下的鼠标键时触发。
mousemove	当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter	鼠标进入一个节点时触发，进入子节点不会触发这个事件。
mouseover	鼠标进入一个节点时触发，进入子节点会再一次触发这个事件。
mouseout	鼠标离开一个节点时触发，离开父节点也会触发这个事件。
mouseleave	鼠标离开一个节点时触发，离开父节点不会触发这个事件。
contextmenu	按下鼠标右键时触发。
wheel	滚动鼠标的滚轮时触发。

MouseEvent

MouseEvent接口代表了鼠标相关的事件。继承了Event拥有其所有属性和方法。该接口还有自己的属性与方法。

实例属性

属性	介绍
MouseEvent.screenX	鼠标相对于屏幕的水平位置，设置该属性不会移动鼠标。
MouseEvent.screenY	鼠标相对于屏幕的垂直位置，其他与screenX相同。
MouseEvent.clientX	鼠标相对于程序窗口的水平位置，默认值为0，设置该属性不会移动鼠标。
MouseEvent.clientY	鼠标相对于程序窗口的垂直位置，其他与clientX相同。
MouseEvent.ctrlKey	是否同时按下了 `Ctrl` 键。
MouseEvent.shiftKey	是否同时按下了 `Shift` 键。
MouseEvent.altKey	是否同时按下 `Alt` 键。
MouseEvent.metaKey	是否同时按下 `Meta` 键。
MouseEvent.button	表示按下了哪一个鼠标按键。 `0`：默认值，按下主键（左键）或者当前事件没有定义这个属性。 `1`：按下辅助键（中键）。 `2`：表示按下次键（通右键）。
MouseEvent.buttons	表示按下了鼠标的哪些键。一个三个比特位的二进制值。 `0`/`000b`：默认值，没有按下任何键。 `1`/`001b`：按下主键。 `2`/`010b`：按下次键。 `4`/`100b`：按下辅助键。若返回`3`/`011b`：表示同时按下了左键和右键。
MouseEvent.relatedTarget	表示事件的相关节点，默认为`null`。触发`mouseenter`和`mouseover`事件时，表示鼠标刚刚离开的那个元素节点；`mouseout`和`mouseleave`事件时，表示鼠标正在进入的那个元素节点。

实例方法

方法	介绍
MouseEvent.getModifierState(`Key`)	如果指定的`Key`被按下或激活，则方法返回 `true`。 `Key`可以为：`Alt`、`AltGraph`、`Control`、`Meta`、`Shift`、`CapsLock`、`NumLock`、`ScrollLock`。

WheelEvent

WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。

实例属性

属性	介绍
WheelEvent.deltaX	只读，滚轮的水平滚动量。
WheelEvent.deltaY	只读，滚轮的垂直滚动量。
WheelEvent.deltaZ	只读，滚轮的 Z 轴滚动量。
WheelEvent.deltaMode	只读，表示滚动量的 `delta` 值的单位。`0`：像素。`1`：行。`2`：页。

键盘事件

事件	介绍
keydown	在某个键被按下时触发。
keyup	在释放按键时触发。
keypress	按下非功能键时触发。

KeyboardEvent

KeyboardEvent接口用来描述用户与键盘的互动。其继承了Event。

实例属性

属性	介绍
KeyboardEvent.key	当前按下的键名。
KeyboardEvent.code	表示当前按下的键的字符串形式。可能为：`0` ~ `9`：`digital0` ~ `digital9` `A` ~ `z`：`KeyA` ~ `KeyZ` `F1` ~ `F12`：`F1` ~ `F12` 方向键：`ArrowDown`、`ArrowUp`、`ArrowLeft`、`ArrowRight` `Alt` 键：`AltLeft`、`AltRight` `Shift` 键：`ShiftLeft`、`ShiftRight` `Ctrl` 键：`ControlLeft`、`ControlRight`。
KeyboardEvent.location	整数，当前按下的键的位置。 0：处在键盘的主区域。 1：处在键盘的左侧，只适用那些有两个位置的键。 2：处在键盘的右侧，只适用那些有两个位置的键。 3：处在数字小键盘。
KeyboardEvent.ctrlKey	是否按下 `Ctrl` 键。
KeyboardEvent.shiftKey	是否按下 `Shift` 键。
KeyboardEvent.altKey	是否按下 `Alt` 键。
KeyboardEvent.metaKey	是否按下 `Meta` 键。
KeyboardEvent.repeat	是否重复按键。

实例方法

方法	介绍
KeyboardEvent.getModifierState(`key`)	如果指定的`Key`被按下或激活，则方法返回 `true`。 `Key`可以为：`Alt`、`AltGraph`、`Control`、`Meta`、`Shift`、`CapsLock`、`NumLock`、`ScrollLock`。

进度事件

事件	介绍
abort	外部资源中止加载时触发。如果发生错误导致中止，不会触发该事件。
error	由于错误导致外部资源无法加载时触发。
load	外部资源加载成功时触发。
loadstart	外部资源开始加载时触发。
loadend	外部资源停止加载时触发，发生顺序排在`error`、`abort`、`load`等事件之后。
progress	外部资源加载过程中不断触发。
timeout	加载超时时触发。

ProgressEvent

ProgressEvent接口主要用来描述外部资源加载的进度

实例属性

属性	介绍
ProgressEvent.lengthComputable	表示加载的总量是否可以计算。
ProgressEvent.loaded	表示已经加载的量。
ProgressEvent.total	表示需要加载的总量。

表单事件

事件	介绍
input	当`<input>`、`<select>`、`<textarea>`的值发生变化时触发。
select	当选中`<input>`、`<textarea>`中的文本时触发。
chang	当`<input>`、`<select>`、`<textarea>`的值修改完成，失去焦点时触发。
invalid	提交表单时不满足校验条件时触发。
reset	当表单对象`<form>`重置时触发。
submit	当表单对象`<form>`向服务器提交时触发。

InputEvent

InputEvent用来描述input事件。其继承自Event接口。

实例属性

属性	介绍
InputEvent.data	只读，返回包含插入字符的字符串，如果更改没有插入文本则为空字符串。
InputEvent.dataTransfer	只读，返回一个 `DataTransfer` 对象，包含了关要添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。
InputEvent.inputType	只读，返回对可编辑内容所做更改的类型，有许多可能的值，如 `insertText`、`deleteContentBackward`、`insertFromPaste` 、`formatBold`、….。
InputEvent.isComposing	只读，返回该事件是否在触发 `compositionstart` 事件之后且触发 `compositionend` 事件之前触发。

实例方法

方法	介绍
InputEvent.getTargetRanges()	返回一个 `StaticRange` 对象数组，如果不取消输入事件，该数组将受到 DOM 更改的影响。

触摸事件

事件	介绍
touchcancel	在一个或多个接触点以特定于实现的方式中断时触发。
touchend	在从接触面移除一个或多个接触点时触发。
touchmove	在一个或多个接触点沿接触面移动时触发。
touchstart	在向接触面放置一个或多个接触点时触发。

TouchEvent

继承了 Event 接口，表示由触摸引发的事件实例

实例属性

属性	介绍
TouchEvent.touches	`TouchList`类型，所有当前处于活跃状态的触摸点。
TouchEvent.targetTouches	`TouchList`类型，所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点。
TouchEvent.changedTouches	`TouchList`类型，本次触摸事件的相关触摸点。
TouchEvent.ctrlKey	`Ctrl` 键是否同时按下。
TouchEvent.shiftKey	`Shift` 键是否同时按下。
TouchEvent.altKey	`Alt` 键是否同时按下。
TouchEvent.metaKey	`Meta` 或 `Windows` 是否同时按下。

Touch

代表单个触摸点。

Touch属性

属性	介绍
identifier	触摸点的唯一 ID。
target	触摸点开始时所在的网页元素。
clientX	触摸点相对于浏览器窗口左上角的水平距离。
clientY	触摸点相对于浏览器窗口左上角的垂直距离。
screenX	触摸点相对于屏幕左上角的水平距离。
screenY	触摸点相对于屏幕左上角的垂直距离。
pageX	触摸点相对于网页左上角的水平位置，包括页面的滚动距离。
pageY	触摸点相对于网页左上角的垂直位置，包括页面的滚动距离。
radiusX	触摸点周围受到影响的椭圆范围的 X 轴半径。
radiusY	触摸点周围受到影响的椭圆范围的 Y 轴半径。
rotationAngle	触摸区域的椭圆的旋转角度，单位为度数`deg`，在0到90之间。
force	触摸压力。范围在0到1之间。

拖放事件

事件	介绍
drag	拖动元素或选择的文本时每几百毫秒触发一次。
dragend	在拖动操作结束（通过释放鼠标按钮或按下退出键）时触发。
dragenter	在拖动的元素或选择的文本进入有效的放置目标时触发。
dragleave	在拖动的元素或选择的文本离开有效的放置目标时触发。
dragover	在拖动的元素或选择的文本在有效的放置目标时触发（每几百毫秒）。
dragstart	在用户开始拖动元素或选择的文本时触发。
drop	在元素或选择的文本被放置在有效的放置目标时触发。

DragEvent

继承了MouseEvent与Event。

实例属性

属性	介绍
DragEvent.dataTransfer	只读,`DataTransfer`类型，在拖放交互期间传输的数据。

DataTransfer

用于保存拖动并放下过程中的数据。

实例属性

属性	介绍
DataTransfer.dropEffect	获取当前选定的拖放操作类型或者设置的为一个新的类型。值可能为 `none`, `copy`, `link` 或 `move`。
DataTransfer.effectAllowed	可用的操作类型。值可能为 `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`或`all`。
DataTransfer.files	包含数据传输中可用的所有本地文件的列表。
DataTransfer.items	只读，包含所有拖动数据列表的 `DataTransferItemList` 对象。
DataTransfer.types	只读，一个提供 dragstart 事件中设置的格式的 strings 数组。

实例方法

方法	介绍
DataTransfer.setDragImage(`imgElement`, `xOffset`, `yOffset`)	`imgElement`：用于拖曳反馈图像的 `Element` 元素。 `xOffset`：图片相对于鼠标指针的x轴偏移量。 `yOffset`：图片相对于鼠标指针的y轴偏移量。发生拖动时，从拖动目标生成半透明图像，并在拖动过程中跟随鼠标指针。
DataTransfer.clearData(`format`)	`format`：可选， `string` ，指定要删除的数据类型。如果此参数为空字符串或未提供，则将删除所有类型的数据。删除与给定类型关联的数据。
DataTransfer.getData(`format`)	`format`：可选， `string` ，指定要获取的数据类型。返回检索给定类型数据的字符串。
DataTransfer.setData(`format`, `data`)	`format`：`string` ，数据类型。 `data`：`string` ，要添加的数据。设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。

动画事件

事件	介绍
animationcancel	在动画意外中止时触发。
animationend	在动画正常完成时触发。
animationiteration	在动画迭代完成时触发。
animationstart	在动画开始时触发。

剪切板事件

事件	介绍
copy	使用复制操作时触发。
cut	使用剪切操作时触发。
paste	使用粘贴操作时触发。

全屏事件

事件	介绍
fullscreenchange	进入或退出全屏模式时触发。
fullscreenerror	在尝试进入或退出全屏模式而发生错误时触发。

加载和卸载事件

事件	介绍
DOMContentLoaded	在文档完全加载并解析后触发，无需等待样式表、图像和子框架完成加载。
readystatechange	在文档的 `readyState` 属性发生变化时触发。

指针事件

事件	介绍
gotpointercapture	在使用 `setPointerCapture()` 捕获元素时触发。
lostpointercapture	在捕获指针释放时触发。
pointercancel	在指针事件取消时触发。
pointerdown	在指针变为活动状态时触发。
pointerenter	在指针移入到元素或其子元素之一的命中测试边界时触发。
pointerleave	在指针移出元素的命中测试边界时触发。
pointerlockchange	在指针被锁定或解锁时触发。
pointerlockerror	在指针锁定失败时触发。
pointermove	在指针坐标改变时触发。
pointerout	在指正移除元素的命中测试边界时触发。
pointerover	在指针移入元素的命中测试边界时触发。
pointerup	在指针不再活动时触发。

选择事件

事件	介绍
selectionchange	在文档中的选中的文本发生改变时触发。

过渡事件

事件	介绍
transitioncancel	在 `CSS` 过渡取消时触发。
transitionend	在 `CSS` 过渡完成时触发。
transitionrun	在 `CSS` 过渡第一次创建时触发。
transitionstart	在 `CSS` 过渡实际开始时触发

其他事件

事件	介绍
beforescriptexecute	在静态的 `<script>` 开始执行脚本时触发。
scroll	在滚动文档视图或元素时触发。
visibilitychange	在变前的内容变为可见、隐藏时触发。
resize	当窗口大小改变时触发。

参考资料

DOM 现行标准
 面向开发者的 Web 技术 Web API 文档对象模型（DOM）
阮一峰 JavaScript 教程
 菜鸟 HTML DOM 教程

关于本人

HaiYao的博客
 Git主页