定时器

var timerId = setTimeout(func|code, delay); //delay是毫秒数

setInterval每隔一段时间就执行一次。取消定时器：

var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout推迟执行。不同状态不同浏览器的时间可能不同。

setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
// 2
// 1

DOM “文档对象模型”（Document Object Model）。

DOM 浏览器提供原生的节点对象`Node`，是DOM的最小组成单位。

下面的节点的类型都继承了Node,因此也继承了一些属性和方法。节点类型和nodeName属性名字

Document：整个文档树的顶层节点：文档节点 #document
DocumentType：doctype标签（比如<!DOCTYPE html>）文档类型节点
Element：网页的各种HTML标签（比如<body>、<a>等）元素节点
Attr：网页元素的属性（比如class="right"）属性节点
Text：标签之间或标签包含的文本文本节点
Comment：注释注释节点
DocumentFragment：文档片段节点 DOM 树：一个文档的所有节点，抽象成的一种树状结构。
document节点，代表整个文档。document下有两个节点，<!doctype html>和<html>。

Node属性

Node.prototype.nodeType 整数值，表示节点的类型。
Node.prototype.nodeName 节点的名称，如节点<div>的名称是DIV。
Node.prototype.nodeValue 文本值，该属性可读写。
Node.prototype.textContent 当前节点和它的所有后代节点的文本内容
Node.prototype.baseURI 当前网页的绝对路径
Node.prototype.ownerDocument 顶层文档对象
Node.prototype.nextSibling 当前节点后面的第一个同级节点。
Node.prototype.previousSibling 前面的、距离最近的一个同级节点
Node.prototype.parentNode 父节点
Node.prototype.parentElement 父元素节点
Node.prototype.firstChild，Node.prototype.lastChild 第一个子节点和最后一个子节点
Node.prototype.childNodes 类似数组的对象（NodeList集合
Node.prototype.isConnected 当前节点是否在文档之中。

方法

Node.prototype.appendChild() 插入一个节点
Node.prototype.hasChildNodes() 是否有子节点布尔
Node.prototype.cloneNode(isCloneChildred) 克隆一个节点以及是否包含子节点
Node.prototype.insertBefore(newNode，referenceNode) 父节点在某个位置插入子节点
Node.prototype.removeChild() 移除该子节点并返回
Node.prototype.replaceChild() 替换
Node.prototype.contains(node) node为当前，子节点，孙子节点都返回true
Node.prototype.compareDocumentPosition() 返回数值，表示与当前节点的关系
Node.prototype.isEqualNode() 两个节点是否相等 ==
Node.prototype.isSameNode() 是否为同一个节点 ===
Node.prototype.normalize() 清理当前节点内部的所有文本节点（text）
Node.prototype.getRootNode() 返回当根节点document

节点集合 NodeList和HTMLCollection

NodeList可以包含各种类型的节点

var children = document.body.childNodes;
children.length // 包含的节点数量
children.forEach(console.log)
children.item(0) // 返回第一个成员
Array.isArray(children) // false NodeList不是数组
//可以通过Array.prototype.slice.call(children);转为数组

keys values entries

keys()键名的遍历器，values()键值的遍历器，entries()都包含。

HTMLCollection只能包含 HTML 元素节点（element）。

length返回成员数量。但只能使用for循环遍历。 item(index)表示index位置上的成员。 namedItem(id|name) 返回对应的元素节点。

ParentNode

由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥有ParentNode接口。
children属性返回一个HTMLCollection实例。
firstElementChild属性返回第一个元素子节点。
lastElementChild属性返回最后一个元素子节点。
append(p1...)方法为当前节点后面追加一个或多个子节点。
prepend()方法为当前节点前面追加一个或多个子节点。

ChildNode

remove()从父节点移除当前节点。
before()在前面，插入一个或多个同级节点。
after()在后面，插入一个或多个同级节点。
replaceWith()替换当前节点。

Document

document节点对象代表整个文档，每张网页都有自己的document对象。
正常的网页，直接使用document或window.document。
document对象继承了EventTarget接口和Node接口，并且混入了ParentNode接口。

属性

document.defaultView属性返回document对象所属的window对象。
document.doctype，指向<DOCTYPE>节点，即文档类型。document.firstChild通常就返回这个节点。 document.documentElement返回根元素节点。一般是<html>节点。
document.body属性指向<body>节点
document.head属性指向<head>节点。
document.scrollingElement返回文档的滚动元素。
document.activeElement返回当前焦点的 DOM 元素。通常是<input>、<textarea>、<select>。 document.fullscreenElement返回以全屏状态展示的 DOM 元素。
document.links|forms|images|embeds|plugins|scripts返回页面所有的<>节点。
document.styleSheets网页内嵌或引入的 CSS 样式表集合StyleSheetList。

静态信息属性

document.documentURI属性和document.URL属性都返回当前文档的网址。
document.domain属性返回当前文档的域名。
Location提供 URL 相关的信息和操作方法。
document.lastModified文档最后修改的时间。
document.title当前文档的标题。
document.characterSet当前文档的编码。
document.referrer访问者来自哪里。
document.dir表示文字方向. rtl ltr从左到右。
compatMode浏览器处理文档的模式。

文档状态属性

document.hidden表示当前页面是否可见。
document.visibilityState返回文档的可见状态。visible，hidden，prerender，unloaded。
document.readyState文档的状态：loading， interactive（加载外部资源阶段），complete。

其他属性

document.designMode文档是否可编辑。on off。

<script id="foo">
  console.log(
    document.currentScript === document.getElementById('foo')
  ); // true
</script>

document.implementation属性返回一个DOMImplementation对象。

方法

document.open(); //清除当前文档所有内容，使文档处于可写状态
document.write('hello world');
document.writeln //有换行
document.close();

document.querySelector 以CSS 选择器作为参数，返回匹配的第一个元素节点。
document.querySelectorAll返回一个NodeList对象。
document.getElementsByTagName(“HTML 标签名”)返回HTMLCollection实例。
document.getElementsByClassName(“className”)返回（HTMLCollection实例。
document.getElementsByName("name")有name属性的 HTML 元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）.
document.getElementById("id")返回元素节点。比document.querySelector(“#id”)效率高。
document.elementsFromPoint()位于指定坐标（相对于视口）的所有元素。
document.createElement|TextNode|Attribute|Comment|Fragment生成节点，并返回。
document.createEvent方法生成一个事件对象（Event实例），该对象可以被element.dispatchEvent方法使用，触发指定事件。

// 添加事件监听函数
document.addEventListener('click', listener, false);

// 移除事件监听函数
document.removeEventListener('click', listener, false);

// 触发事件
var event = new Event('click');
document.dispatchEvent(event);

document.hasFocus当前文档是否有元素被激活或获得焦点。
document.adoptNode document.importNode
document.createNodeIterator返回一个子节点遍历器。
document.createTreeWalker返回一个 DOM 的子树遍历器
document.execCommand()的返回值是一个布尔值。 document.queryCommandSupported()方法返回一个布尔值.
document.queryCommandEnabled()方法返回一个布尔值。

Element节点对象对应网页的 HTML 元素 `nodeType`属性都是`1`

属性

// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"

accessKey设置如btn的快捷键。
draggable是否可拖动。该属性可读写。
lang语言设置。该属性可读写。
tabIndex在 Tab 键遍历时的顺序。该属性可读写。
dir写当前元素的文字方向。
title读写当前元素的 HTML 属性title。

状态相关属性

hidden可读写，控制当前元素是否可见。
contentEditable元素的内容可以编辑。isContentEditable。
attributes返回一个类似数组的对象，成员是当前元素节点的所有属性节点。
className。 classList。

var div = document.getElementById('myDiv');

div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除
div.classList.contains('myCssClass'); // 返回 true 或者 false
div.classList.item(0); // 返回第一个 Class
div.classList.toString();

自定义data-属性，用来添加数据。 通过dataset来读取。
innerHTML包含的所有 HTML 代码。

el.innerHTML = ''; // 删除所有它包含的所有节点。

outerHTML包括该元素本身和所有子元素。
clientHeight clientWidth 返回元素节点的 CSS 高宽度。
clientLeft clientTop 网页元素左边和顶部边框的宽度（单位像素）。
scrollHeight scrollWidth 当前元素的总高宽度（单位像素）。
scrollLeft scrollTop 当前元素的滚动条滚动的像素数量。
offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。
offsetHeight offsetWidth offsetLeft offsetTop

实例方法

getAttribute()：读取某个属性的值
getAttributeNames()：返回当前元素的所有属性名
setAttribute()：写入属性值
hasAttribute()：某个属性是否存在
hasAttributes()：当前元素是否有属性
removeAttribute()：删除属性
closest 选择器作为参数，返回最接近当前节点的一个祖先节点。
matches表示当前元素是否匹配给定的 CSS 选择器。

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

scrollIntoView滚动当前元素到浏览器的可见区域。
getBoundingClientRect返回对象，提供当前元素节点的信息，基本上就是 CSS 盒状模型的所有信息.如x,y,height,width,top,bottom.
getClientRects返回一个类似数组的对象，包含元素在页面上形成的所有矩形。
insertAdjacentElement在相指定位置，插入一个新的节点并返回。
insertAdjacentHTML将一 HTML字符串，解析生成 DOM 结构，并插入到指定位置。
remove focus blur click

Text

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。继承了Node接口，还继承了CharacterData接口。

属性

// 读取文本内容 可写
document.querySelector('p').firstChild.data
// 等同于
document.querySelector('p').firstChild.nodeValue

wholeText属性将当前文本节点与毗邻的文本节点，作为一个整体返回。
length属性返回当前文本节点的文本长度。

方法

appendData()尾部追加字符串。
deleteData(startIndex, length)：删除Text节点内部的子字符串.
insertData(startIndex, strValue)：插入字符串.
replaceData(startIndex, length, newStr)：用于替换文本.
subStringData(startIndex, length)：用于获取子字符串.
remove方法用于移除当前Text节点。
splitText(index)方法将Text节点一分为二.
DocumentFragment节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。它一般用于构建一个 DOM 结构，然后插入当前文档。

CSS

getAttribute()方法、setAttribute()方法和removeAttribute()方法

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);

相当于：

<div style="background-color:red; border:1px solid black;" />

CSSStyleDeclaration 接口用来操作元素的样式。三个地方部署了这个接口。

元素节点的style属性（Element.style）
CSSStyle实例的style属性
window.getComputedStyle()的返回值

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

CSSStyleDeclaration.cssText读写当前规则的所有样式声明文本。
CSSStyleDeclaration.length CSSStyleDeclaration.parentRule当前规则所属的那个样式块。
CSSStyleDeclaration.getPropertyPriority有没有设置important优先级。
CSSStyleDeclaration.getPropertyValue表示该属性的属性值。
CSSStyleDeclaration.removeProperty 移除这个属性。
CSSStyleDeclaration.setProperty方法用来设置新的 CSS 属性。

侦测。判断是否支持这个CSS

普遍的方法是，判断元素的style对象的某个属性值是否为字符串。

document.body.style['maxWidth'] // ""
document.body.style['maximumWidth'] // undefined

CSS对象

<div id="foo#bar">
document.querySelector('#' + CSS.escape('foo#bar'))

CSS.supports当前环境是否支持某一句 CSS 规则。

window.getComputedStyle返回一个CSSStyleDeclaration实例，就用来返回浏览器计算后得到的最终规则。

`StyleSheet`代表样式表，包括`<link>`元素加载的样式表和`<style>`元素内嵌的样式表。

StyleSheet.disabled表示该样式表是否处于禁用状态。
Stylesheet.href返回样式表的网址。
StyleSheet.media返回类似数组的对象（MediaList实例），成员是表示适用媒介的字符串。
StyleSheet.title属性返回样式表的title属性。
StyleSheet.type属性返回样式表的type属性，通常是text/css。
StyleSheet.parentStyleSheet返回包含了当前样式表的那张样式表。也就是@import自己的表。
StyleSheet.ownerNode返回对象所在的 DOM 节点，通常是<link>或<style>。
CSSStyleSheet.insertRule在当前样式表的插入一个新的 CSS 规则。
##StyleSheet.cssRules）获取 CSSRule 实例 CSSRule.cssText属性返回当前规则的文本
CSSRule.parentRule属性返回包含当前规则的父规则
CSSRule.type表示当前规则的类型。最常见的类型有以下几种。

1：普通样式规则（CSSStyleRule 实例）
3：@import规则
4：@media规则（CSSMediaRule 实例）
5：@font-face规则

CSSStyleRule

CSSStyleRule.selectorText属性返回当前规则的选择器。
CSSStyleRule.style属性返回一个对象（CSSStyleDeclaration 实例），代表当前规则的样式声明

CSSMediaRule 如果 CSS 规则是`@media`代码块

Mutation Observer API 用来监视 DOM 变动

observe（）

第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变动

var article = document.querySelector('article');

var  options = {
  'childList': true, //子节点的变动（指新增，删除或者更改）。
  'attributes':true //属性的变动。
  'characterData': false, //节点内容或节点文本的变动。
} ;

observer.observe(article, options);

disconnect()方法用来停止观察。
takeRecords()方法用来清除变动记录，即不再处理未处理的变动

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）

type：观察的变动类型（attributes、characterData或者childList）。
target：发生变动的DOM节点。
addedNodes：新增的DOM节点。
removedNodes：删除的DOM节点。
previousSibling：前一个同级节点，如果没有则返回null。
nextSibling：下一个同级节点，如果没有则返回null。
attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

事件

EventTarget

DOM 节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。 - addEventListener()：绑定事件的监听函数

removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件

事件模型

监听函数

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

window.onload = doSomething;
div.onclick = function (event) {
  console.log('触发事件');
};

window.addEventListener('load', doSomething, false);

事件传播

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

事件的代理：由于会传播，让父节点来处理其子节点的事件

stopImmediatePropagation方法可以彻底取消这个事件。

Event

所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。

var ev = new Event(
  'look',
  {
    'bubbles': true, //表示事件对象是否冒泡。
    'cancelable': false//，表示事件是否可以被取消，即能否用`Event.preventDefault()`取消这个事件
  }
);
document.dispatchEvent(ev);

实例属性

bubbles是否会冒泡
Event.eventPhase表示事件目前所处的阶段。

0，事件目前没有发生。
1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。
2，事件到达目标节点，即Event.target属性指向的那个节点。
3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。 cancelable，表示事件是否可以取消。
.defaultPrevented是否调用过
事件的原始触发节点（Event.target），另一个是事件当前正在通过的节点（Event.currentTarget）。
timeStamp毫秒时间戳，表示事件发生的时间。它是相对于网页加载成功开始计算的。
isTrusted是否由真实的用户行为产生
detail属性只有浏览器的 UI （用户界面）事件才具有。表示事件的某种信息。点击或滚轮等。
preventDefault方法取消浏览器对当前事件的默认行为
如果要阻止传播，可以使用stopPropagation()或stopImmediatePropagation()方法。
composedPath()数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。

鼠标事件MouseEvent

点击事件

click：按下鼠标（通常是按下主按钮）时触发。
dblclick：在同一个元素上双击鼠标时触发。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。

var event = new MouseEvent(type, options);
options：{
-   `screenX`：数值，屏幕的水平位置像素），
-   `screenY`：数值，屏幕的垂直位置（单位像素），
-   `clientX`：数值，程序窗口的水平位置（单位像素），
-   `clientY`：数值，程序窗口的垂直位置（单位像素），
-   `ctrlKey`：是否同时按下了 Ctrl 键，
-   `shiftKey`：是否同时按下了 Shift 键，
-   `altKey`：是否同时按下 Alt 键
-   `metaKey`：是否同时按下 Meta 键
-   `button`：表示按下了哪一个鼠标按键，012左中右
-   `buttons`：数值，表示按下了鼠标的哪些键
-   `relatedTarget`：节点对象，表示事件的相关节点
}

getModifierState方法返回一个布尔值，表示有没有按下特定的功能键

移动事件

mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件。
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件）。
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件。 movementX属性返回当前位置与上一个mousemove事件之间的水平距离（单位像素）。
offsetX属性返回鼠标位置与目标节点左侧的距离。
pageX属性返回鼠标位置与文档左侧边缘的距离
relatedTarget属性返回事件的相关节点

其他事件

contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文”菜单键时触发。
wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。 WheelEvent 接口继承了 MouseEvent 实例

var wheelEvent = new WheelEvent(type, options);
options: {
-   `deltaX`：数值，表示滚轮的水平滚动量，默认值是 0.0。
-   `deltaY`：数值，表示滚轮的垂直滚动量，默认值是 0.0。
-   `deltaZ`：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0。
-   `deltaMode`：数值，表示相关的滚动事件的单位，适用于上面三个属性。`0`表示滚动单位为像素，`1`表示单位为行，`2`表示单位为页，默认为`0`。
}

键盘事件 `KeyboardEvent` keydown keypress keyup

new KeyboardEvent(type, options)
    option除了Event还可以： 
    {
        -   `key`：字符串，当前按下的键
-   `code`：字符串，表示当前按下的键的字符串形式
-   `location`：整数，当前按下的键的位置
-   `ctrlKey`：布尔值，是否按下 Ctrl 键
-   `shiftKey`：布尔值，是否按下 Shift 键
-   `altKey`：布尔值，是否按下 Alt 键
-   `metaKey`：布尔值，是否按下 Meta 键
-   `repeat`：布尔值，是否重复按键
    }

getModifierState()是否按下或激活指定的功能键。

event.getModifierState('Control')
  event.getModifierState('Alt') 
  event.getModifierState('Meta')

进度事件用来描述资源加载的进度

主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发。

abort：用户主动中止外部资源加载时触发
error：错误时触发。
load：载成功时触发。
loadstart：开始加载时触发。
loadend：停止加载时触发，。
progress：外部资源加载过程中不断触发。
timeout：超时时触发。

var p = new ProgressEvent('load', {
  lengthComputable: true,
  loaded: 30,
  total: 100,
});

document.body.addEventListener('load', function (e) {
  console.log('已经加载：' + (e.loaded / e.total) * 100 + '%');
});

document.body.dispatchEvent(p);
// 已经加载：30%

表单事件

input select change invalid reset事件当表单重置时触发。
submit，submit事件的发生对象是<form>元素，而不是<button>元素。

new InputEvent(type, options)
-   `inputType`：发生变更的类型。{
    -   手动插入文本：`insertText`
    -   粘贴插入文本：`insertFromPaste`
    -   向后删除：`deleteContentBackward`
    -   向前删除：`deleteContentForward`
}
-   `data`：表示插入的字符串。
-   `dataTransfer`：粘贴内容（insertFromPaste）或拖拽内容（`insertFromDrop`）时才有效。

触摸事件

Touch 接口代表单个触摸点

var touch = new Touch(touchOptions);
{
 -   `identifier`：表示触摸点的唯一 ID。
-   `target`：触摸点开始时所在的网页元素。
-   `clientX`：浏览器窗口左上角
-   `screenX`：屏幕左上角
-   `pageX`：网页左上角的水平位置。
-   `radiusX`：触摸点周围受到影响的椭圆范围的 X 轴半径
-   `rotationAngle`：触摸区域的椭圆的旋转角度在0到90度之间
-   `force`：`0`代表没有压力，`1`代表硬件所能识别的最大压力。
}

TouchList接口表示一组触摸点的集合 TouchEvent

new TouchEvent(type, options)
-   `touches`：当前处于活跃状态的触摸点。
-   `targetTouches`：处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点。
-   `changedTouches`：相关触摸点。
-   `ctrlKey` `shiftKey` `altKey``metaKey`

种类

touchstart：用户开始触摸时触发。
touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发
touchmove：用户移动触摸点时触发
touchcancel：触摸点取消时触发

拖拉事件

为了让元素节点可拖拉，可以将该节点的draggable属性设为true。

drag：拖拉过程中。
dragstart：用户开始拖拉时
dragend：拖拉结束时（
dragenter：拖拉进入当前节点时
dragover：拖拉到当前节点上方时
dragleave：拖拉操作离开当前节点范围时
drop：被拖拉的节点或选中的文本，释放到目标节点时

new DragEvent(type, options) //继承了`MouseEvent``Event`

所有拖拉事件的实例都有一个DragEvent.dataTransfer属性

target.addEventListener('dragover', function (DragEvent e) {
  e.preventDefault();
  e.stopPropagation();
 e.dataTransfer.effectAllowed = 'move';//link copyLink copy Movelink Moveall none uninitialized`设置本次拖拉中允许的效果
  e.dataTransfer.dropEffect = 'copy'; //设置放下（drop）被拖拉节点时的效果
  `files`包含一组本地文件，如果本次拖拉不涉及文件.，则该属性为空的 FileList 对象。
  `types`是拖拉的数据格式通常是 MIME 值.\
  `items`每个成员就是本次拖拉的一个对象
});

setData()方法用来设置拖拉事件所带有的数据。对应getData()还有clearData()

var dt = event.dataTransfer;

// 添加链接
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');

// 添加 HTML 代码
dt.setData('text/html', 'Hello there, <strong>stranger</strong>');
dt.setData('text/plain', 'Hello there, <strong>stranger</strong>');

// 添加图像的 URL
dt.setData('text/uri-list', imageurl);
dt.setData('text/plain', imageurl);

其他事件

资源事件

beforeunload事件在窗口、文档、各种资源将要卸载前触发
unload事件在窗口关闭或者document对象将要卸载时触发
load事件在页面或某个资源加载成功时触发（不包括缓存）
error事件是在页面或资源加载失败时触发。
abort事件在用户取消加载时触发。

pageshow事件在页面加载时触发，persisted判断是否是缓存加载的。
popstate事件在浏览器的history对象的当前记录发生显式切换时触发
hashchange事件在 URL 的 hash 部分（即#号后面的部分，包括#号）发生变化时触发。

网页状态事件

DOMContentLoaded 网页下载并解析完成以后，DOM完毕，但是资源还未加载完，所以比load早。
readystatechange事件当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发

窗口事件

window.addEventListener('scroll', callback);

window.addEventListener('resize', resizeMethod, true);

fullscreenchange事件在进入或退出全屏状态时触发

粘贴板事件

cut、copy、paste这三个事件的事件对象都是ClipboardEvent接口的实例。

焦点事件

focus blur不会冒泡。
focusin：将要获得焦点发生在focus事件之前。该事件会冒泡。
focusout 都继承了FocusEvent接口。
target：事件的目标节点。
relatedTarget：对于focusin和focusout事件起作用。

CustomEvent 接口用于生成自定义的事件实例

var myEvent = new CustomEvent('myevent', {
  detail: {
    foo: 'bar'
  },
  bubbles: true,
  cancelable: false
});

el.addEventListener('myevent', function (event) {
  console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);

GlobalEventHandlers

var img = document.getElementById('img');
img.onabort = function () { 
  console.log('image load 停止加载.');
}

window.onerror = function (message, source, lineno, colno, error) {
  // ...
}

element.onfocus = function () {
  console.log("onfocus event detected!");
};
element.onblur = function () {
  console.log("onblur event detected!");
};

document.oncontextmenu = function () {
  return false;
};

其他属性

鼠标的事件属性： onclick ondblclick onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onwheel 键盘的事件属性。

onkeydown onkeypress onkeyup

焦点的事件属性。

onblur onfocus

表单的事件属性。

oninput onchange onsubmit onreset oninvalid onselect

触摸的事件属性。

ontouchcancel ontouchend ontouchmove ontouchstart

拖动的事件属性分成两类：一类与被拖动元素相关，另一类与接收被拖动元素的容器元素相关。

被拖动元素的事件属性。

ondragstart：拖动开始 ondrag：拖动过程中，每隔几百毫秒触发一次 ondragend：拖动结束

接收被拖动元素的容器元素的事件属性。

ondragenter：被拖动元素进入容器元素。 ondragleave：被拖动元素离开容器元素。 ondragover：被拖动元素在容器元素上方，每隔几百毫秒触发一次。 ondrop：松开鼠标后，被拖动元素放入容器元素。

<dialog>对话框元素的事件属性。

oncancel onclose

JavaScript基础精简版4（定时器，DOM, 事件）

定时器

DOM “文档对象模型”（Document Object Model）。

DOM 浏览器提供原生的节点对象Node，是DOM的最小组成单位。

Node属性

方法

节点集合 NodeList和HTMLCollection

NodeList可以包含各种类型的节点

keys values entries

HTMLCollection只能包含 HTML 元素节点（element）。

ParentNode

ChildNode

Document

属性

静态信息属性

文档状态属性

其他属性

方法

Element节点对象对应网页的 HTML 元素 nodeType属性都是1

属性

状态相关属性

实例方法

Text

属性

方法

CSS

侦测。判断是否支持这个CSS

CSS对象

StyleSheet代表样式表，包括<link>元素加载的样式表和<style>元素内嵌的样式表。

CSSStyleRule

CSSMediaRule 如果 CSS 规则是@media代码块

Mutation Observer API 用来监视 DOM 变动

observe（）

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）

事件

EventTarget

事件模型

监听函数

事件传播

事件的代理：由于会传播，让父节点来处理其子节点的事件

Event

实例属性

鼠标事件MouseEvent

点击事件

移动事件

其他事件

键盘事件 KeyboardEvent keydown keypress keyup

进度事件用来描述资源加载的进度

表单事件

触摸事件

种类

拖拉事件

其他事件

资源事件

网页状态事件

窗口事件

粘贴板事件

焦点事件

CustomEvent 接口用于生成自定义的事件实例

GlobalEventHandlers

其他属性

DOM 浏览器提供原生的节点对象`Node`，是DOM的最小组成单位。

Element节点对象对应网页的 HTML 元素 `nodeType`属性都是`1`

`StyleSheet`代表样式表，包括`<link>`元素加载的样式表和`<style>`元素内嵌的样式表。

CSSMediaRule 如果 CSS 规则是`@media`代码块

键盘事件 `KeyboardEvent` keydown keypress keyup