《JavaScript高级程序设计》第12-13章
第十二章 DOM2和DOM3
1、DOM2和DOM3模块
DOM2级核心：在1级核心的基础上构建，为节点添加了更多的方法和属性
DOM2级视图：为文档定义了基于样式信息的不同视图
DOM2级事件：说明了如何使用事件和DOM文档交互
DOM2级样式：定义了如何以编程方式来访问和改变CSS样式信息
DOM2级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口
DOM2级HTML：在1级HTML基础上创建，添加了更多属性、方法和新接口
DOM3级XPath模块：
DOM3级加载与保存模块
2、DOM变化
3、样式
1）访问元素的样式：任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性，这个style对象是CSSStyleDeclaration的实例；对于使用短划线的CSS属性名必须将其转换成驼峰大小写形式才能通过JavaScript来访问，不能直接转换的是float属性，应转换为cssFloat（IE则是styleFloat；
2）计算的样式：DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，接收两个参数——要取得计算样式的元素和一个伪元素字符串（如果不需要伪元素信息，则为null），返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式；IE不支持getComputedStyle()方法，它有currentStyle属性
3）操作样式表：应用于文档的所有样式表是通过document.styleSheets集合来表示，通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表
4、元素大小
1）偏移量
offsetHeight：元素在垂直方向上占用的空间大小
offsetWidth：元素在水平方向上占用的空间大小
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
2）客户区大小：元素内容及其内边距所占据的空间大小
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距宽度
3）滚动大小：包含滚动内容的元素大小
scrollHeight：在没有滚动条的情况下，元素内容的总高度
scrollWidtht：在没有滚动条的情况下，元素内容的总宽度
scrollLeft：被隐藏在内容区域左侧的像素数
scrollTop：被隐藏在内容区域上侧的像素数
4）确定元素大小：getBoundingClientRect()方法确定元素在页面中相对于视口的位置，返回一个矩形对象包含四个属性——left、top、right和bottom
5、遍历：基于给定的起点对DOM结构执行深度优先
1）NodeIterator：
创建NodeIterator：document.createNodeIterator()，接收四个参数——root（搜索起点）、whatToShow（被访问节点的数字代码）、filter（一个NodeIterator对象或一个表示应该接受还是拒绝某种特定节点的函数）、entityReferenceExpansion（布尔值，表示是否要扩展实体引用）
操作NodeIterator：nextNode()和previousNode()方法都基于NodeIterator在DOM结构中的内部指针工作
2）TreeWalker
创建TreeWalker：document.TreeWalker(),接受四个参数——作为遍历起点的根节点、要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值（同NodeIterator）
操作TreeWalker：nextNode()、previousNode()、parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling
6、范围
1）创建范围：document.createRange()
2）范围属性：startContainer（范围起点）、startOffset（范围在startContainer中起点的偏移量）、endContainer（范围终点）、endOffset（范围在endContainer中终点的偏移量）、commonAncestorContainer：startContainer和endContainer共同的祖先元素在节点树中位置最深的那个
3）操作范围：
selectNode()接收一个参数——一个DOM节点，选择整个节点，包括其子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点的父节点；selectNodeContents()接收一个参数——一个DOM节点，只选择节点的子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点；
setStart()和endStart都接收两个参数——一个参照节点和一个偏移量，对setStart()来说，参照节点为startContainer，偏移量为startOffset，对setEnd()来说，参照节点为endContainer，偏移量为endOffset。
deleteContents()用于从文档中删除范围所包含的内容；cloneContents()用于创建范围对象的一个副本，然后在文档的其他地方插入该副本；
insertNode()用于向范围选取的开始处插入一个节点；
collapse()用于折叠范围，接收一个参数——布尔值，值为true表示折叠到范围的起点，值为false表示折叠到范围的终点；
compareBoundaryPoints()确定这些范围是否有公共的边界（起点或终点），接收两个参数——表示比较方式的常量值和要比较的范围；cloneRange()用于创建调用它的范围的一个副本；detach()用于从创建范围的文档中分离出该范围
第十三章 事件
1、事件流：描述的是从页面中接收事件的顺序
1）事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
2）事件捕获：事件开始时由不太具体的节点接收，然后逐级向下传播到最具体的元素
3）DOM事件流：经历三个阶段——事件捕获阶段、处于目标阶段和事件冒泡阶段
2、事件处理程序：事件是用户或浏览器自身执行的某种动作，响应某个事件的函数就是事件处理程序
1）HTML事件处理程序
2）DOM0级事件处理程序：为元素的事件处理程序属性设置一个函数；事件处理程序会在其所属元素的作用域内运行
3）DOM2级事件处理程序：addEventListener()和removeEventListener()，都接收三个参数——要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值参数如果是true表示在捕获阶段调用事件处理程序，如果是false表示在冒泡阶段调用事件处理程序
4）IE事件处理程序（IE和Opera有效）：attachEvent()和detachEvent()，都接收两个参数——事件处理程序名称与事件处理程序函数；由于IE及更早的版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段；可以为一个元素添加多个事件处理程序，事件处理程序会在全局作用域中运行，因此this等于window
5）跨浏览器的事件处理程序：addHandler()用于使用DOM0级方法、DOM2级方法或IE方法来添加事件，removeHandler()用于默认使用DOM0级方法法来移除之前添加的事件，都接收三个参数——要操作的元素、事件名称和事件处理程序函数；为了保证处理事件的代码能在大多数浏览器下一致地运行，跨浏览器的事件处理程序只处理事件冒泡
3、事件对象：
1）DOM中的事件对象：
兼容DOM的浏览器会将一个event对象传入到事件处理程序中；
preventDefault()用于阻止特定事件的默认行为，前提是cancelable属性设置为true；stopPropagation()用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡；
currentTarget属性表明其事件处理程序当前正在处理事件的那个元素，始终等于this；target属性表明事件真正的目标；eventPhase属性表明事件当前正处于事件流的哪个阶段，值为1表明事件处于捕获阶段，值为2表明事件处于目标对象上，值为3表明事件处于冒泡阶段；
2）IE中的事件对象：
如果使用DOM0级方法添加事件处理程序时，可以通过window.event取得event对象；如果使用attachEvent()时，那么会有一个event对象作为参数被传入事件处理程序函数中；如果使用HTML特性添加事件处理程序时，可以通过一个event变量来访问event对象；srcElement属性表明事件真正的目标；returnValue属性用于阻止特定事件的默认行为，值为false表明阻止；cancelBubble属性用于立即停止事件在DOM层次中的传播，即取消进一步的事件冒泡，值为true表明停止；
3）跨浏览器的事件对象：getEvent()返回对event对象的引用；getTarget()返回事件的目标，通过检测event对象的target属性，如果存在则返回该属性的值，否则返回srcElement属性的值；preventDefault()用于取消事件的默认行为，如果不存在该方法，则设置returnValue的值为false；stopPropagation()用于阻止事件流，如果不存在该方法，则设置cancelBubble的值为true；
var EventUtil = {
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
4、事件类型
1）UI事件：指的是那些不一定与用户操作有关的事件
DOMactive：表明元素已经被用户操作（通过鼠标或键盘）激活；
load：当页面完全加载在window上触发;
unload：当页面完全卸载在window上触发；
abort：当用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发；
error：当发生JavaScript错误时在window上触发；
select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发；
resize：当窗口或框架大小变化时在window上触发；
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发；
2）焦点事件：会在页面元素获得或失去焦点时触发
blur：在元素失去焦点时触发（通用）；
DOMFocusIn：在元素获得焦点时触发；
DOMFocusOut：在元素失去焦点时触发；
focus：在元素获得焦点时触发（通用）；
focusin：在元素获得焦点时触发；
focusout：在元素失去焦点时触发；
3）鼠标和滚轮事件
click：在用户点击主鼠标按钮或者按下回车键时触发；
dblclick：在用户双击主鼠标按钮时触发；
mousedown：在用户按下了任意鼠标按钮时触发；
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发；
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发；
mousemove：当鼠标指针在元素内部移动时重复触发；
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发；
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发；
mouseup：在用户释放鼠标按钮时触发；
mousewheel：当用户通过鼠标滚轮在垂直方向上滚动页面时触发；当用户向前滚动页面时，wheelDelta是120的倍数；当用户向后滚动页面时，wheelDelta是-120的倍数
shiftKey、ctrlKey、altKey、metaKey：在用户按下Shift、Ctrl、Alt和Meta（在Windows键盘中是Windows键，在苹果机是Cmd键）时布尔值为true
设置bottom属性：
var EventUtil = {
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
}
4）键盘与文本事件
keydown：当用户按下键盘上的任意键时触发，如果按住不放则会重复触发；
keypress：当用户按下键盘上的字符键时触发，如果按住不放则会重复触发；
keyup：当用户释放键盘的键时触发；
textInput：当用户将文本插入文本框之前触发；
5）复合事件
compositionstart：在IME（输入法编辑器）的文本复合系统打开时触发，包含正在编辑的文本；
compositionupdate：在想输入字段中插入新字符时触发，包含正插入的新字符；
compositionend：在IME的文本复合系统关闭时触发，包含此次输入会话中插入的所有字符；
6）变动事件
DOMSubtreeModified：在DOM结构中发生任何变化时触发；
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发，在使用appendChild()、replaceChild()和insertBefore()时首先触发；
DOMNodeRemoved：在节点从其父节点中被移除时触发，在使用removeChild()和replaceChild()时首先触发；
DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发；
DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发；
DOMAttrModified：在特性被修改之后触发；
DOMCharacterDataModified：在文本节点的值发生变化时触发；
7）HTML5事件
contexmenu事件：用于表示何时应该上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单；
beforeunload事件：在浏览器卸载页面之前触发；
DOMContentLoaded：在形成完整的DOM树之后触发，不管当时图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕；
readystatechange事件：提供与文档或元素的加载状态有关的信息，值为uninitialized（未初始化）、loading（正在加载）、loaded（加载完毕）、interactive（交互）、complete（完成）；
pageshow事件：在页面显示时触发，而且是在load事件之后触发；pagehide事件：在浏览器卸载页面时触发，而且是在unload事件之前触发；
hashchange事件：在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员
8）设备事件
orientationchange事件：当用户将设备由横向查看模式切换为纵向查看模式时触发，window.orientationchange值为0（表示肖像模式）、90（表示向左旋转的横向模式）、-90（表示向右旋转的模式）；
MozOrientation事件：当设备的加速计检测到设备方向改变（移动）时触发，event.x、event.y、event.z的值介于1至-1之间，表示不同坐标轴上的方向；
deviceorientation事件：当设备的加速计检测到设备方向改变（朝向）时触发；
devicemotion事件：：当用户将设备移动时触发；
9）触摸与手势事件
touchstart事件：当手指触摸屏幕时触发；
touchmove：当手指在屏幕上滑动时连续触发；
touchend：当手指从屏幕上移开时触发；
touchcancel：当系统停止跟踪触摸时触发；
gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发；
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发；
gestureend：当任何一个手指从屏幕上面移开时触发；
5、内存和性能
1）事件委托：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
2）移除事件处理程序
6、模拟事件
1）模拟鼠标事件
var btn = document.getElementById("myBtn");
//创建事件对象
var event = document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0,null);
//触发事件
btn.dispatchEvent(event);
2）模拟键盘事件
3）模拟其他事件
4）自定义DOM事件
5）IE中的事件模拟
