表单事件
表单事件的种类
input 事件
input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
input事件对象继承了InputEvent接口。
该事件跟change事件很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。
下面是<select>元素的例子。
1234567891011121314/* HTML 代码如下<select id="mySelect&quo ...
进度事件
进度事件的种类
进度事件用来描述资源加载的进度，主要由 AJAX
请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。
abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
error：由于错误导致外部资源无法加载时触发。
load：外部资源加载成功时触发。
loadstart：外部资源开始加载时触发。
loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
progress：外部资源加载过程中不断触发。
timeout：加载超时时触发。
注意，除了资源下载，文件上传也存在这些事件。
下面是一个例子。
1234567image.addEventListener('load', function (event) { image.classList.add('finished' ...
键盘事件
键盘事件的种类
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。
keydown：按下键盘时触发。
keypress：按下有值的键时触发，即按下
Ctrl、Alt、Shift、Meta
这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件。
如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。
keydown
keypress
keydown
keypress
…（重复以上过程）
keyup
KeyboardEvent 接口概述
KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。
浏览器原生提供KeyboardEvent构造函数，用来新建键盘事件的实例。
1new KeyboardEvent(type, options)
KeyboardEvent构造函数接受两个参数。第一个参数是字符串，表示事件类型；第二个参数是一个事件配置对 ...
鼠标事件
鼠标事件的种类
鼠标事件主要有下面这些，所有事件都继承了MouseEvent接口（详见后文）。
（1）点击事件
鼠标点击相关的有四个事件。
click：按下鼠标（通常是按下主按钮）时触发。
dblclick：在同一个元素上双击鼠标时触发。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
click事件可以看成是两个事件组成的：用户在同一个位置先触发mousedown，再触发mouseup。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。
双击时，dblclick事件则会在mousedown、mouseup、click之后触发。
（2）移动事件
鼠标移动相关的有五个事件。
mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这 ...
Event 对象
概述
事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。
Event对象本身就是一个构造函数，可以用来生成新的实例。
1event = new Event(type, options);
Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
12345678var ev = new Event( 'look', { 'bubbles': true, 'cancelable' ...
事件模型
监听函数
浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。
JavaScript 有三种方法，可以为事件绑定监听函数。
HTML 的 on- 属性
HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。
12<body onload="doSomething()"><div onclick="console.log('触发事件')">
上面代码为body节点的load事件、div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码。
元素的事件监听属性，都是on加上事件名，比如onload就是on + load，表示load事件的监听代码。
注意，这些属性的值是将会执行的代码，而不是一个函数。
12345<!-- 正确 --><body onload="doSomething()"> ...
EventTarget 接口
事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM
支持大量的事件，本章开始介绍 DOM 的事件编程。
介绍具体的事件之前，先来看看如何让 DOM 节点监听事件。
概述
DOM
节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。
该接口主要提供三个实例方法。
addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件
EventTarget.addEventListener()
EventTarget.addEventListener()用于在当前节点或对象上（即部署了
EventTarget
接口的对象），定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
1target.addEventListener(t ...
Mutation Observer API
概述
Mutation Observer API 用来监视 DOM 变动。DOM
的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API
都可以得到通知。
概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation
Observer
事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM
的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM
的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
这样设计是为了应付 DOM
变动频繁的特点。举例来说，如果文档中连续插入1000个<p>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而
Mutation Observer
完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。
Mutation Observer 有以下特点。
它等待所有脚本任务完成后，才会运行（即异步触发方式）。
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个 ...
CSS 操作
CSS 与 JavaScript
是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本章介绍如何通过
JavaScript 操作 CSS。
HTML 元素的 style 属性
操作 CSS
样式最简单的方法，就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法，直接读写或删除网页元素的style属性。
1234div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;');
上面的代码相当于下面的 HTML 代码。
1<div style="background-color:red; border:1px solid black;" />
style不仅可以使用字符串读写，它本身还是一个对象，部署了
CSSStyl ...
Text 节点和 DocumentFragment
节点
Text 节点的概念
文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。
通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。
123456// 获取文本节点var textNode = document.querySelector('p').firstChild;// 创造文本节点var textNode = document.createTextNode('Hi');document.querySelector('div').appendChild(textNode);
浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。
12345// 空字符串var text1 = new Text();/ ...