32-JavaScript高级程序设计-事件类型(下)_deviceorientationabsolute accuracy

一、事件类型

接上篇

4. 键盘与文本事件

键盘事件：用户在使用键盘时会触发键盘事件。
3 个键盘事件：
keydown：当用户按下键盘上的任意键时触发，按住不放会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，按住不放会重复触发此事件。按下 Esc 键也会触发。
keyup：当用户释放键盘上的键时触发。
最常使用场景：用户通过文本框输入文本时。

1个文本事件：
textInput：对 keypress 的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发 textInput 事件。

---

• 用户按了一下键盘上的字符键时：
  首先触发 keydown 事件 – 紧跟着触发 keypress 事件 – 最后触发 keyup 事件。
  keydown 和 keypress 都是在文本框发生变化之前被触发的；keyup事件是在文本框已经发生变化之后被触发的。
  如果用户按下了一个字符键不放，就会重复触发 keydown 和 keypress 事件，直到用户松开该键为止。

• 用户按下的是一个非字符键：
  首先触发 keydown 事件 – 然后触发 keyup 事件。
  如果按住这个非字符键不放，就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup 事件。

---

键盘事件类似鼠标事件，支持相同的修改键，事件对象里有对应属性 shiftKey、ctrlKey、altKey 和 metaKey 属性 （IE不支持 metaKey）。

（1）键码 ☆

keydown 和 keyup 事件，event.keyCode 属性中包含一个代码，与键盘上一个特定的键对应。（DOM 和 IE 的 event 对象都支持）
例如：enter 键 keyCode = 13

（2）字符编码

在所有浏览器中，按下能够插入或删除字符的键都会触发 keypress 事件；按下其他键能否触发此事件因浏览器而异。

keypress 事件，IE9、Firefox、Chrome 和 Safari，event.charCode 属性：按下的那个键所代表字符的 ASCII 编码。event.keyCode 通常等于0或者也可能等于所按键的键码。
IE8及之前版本和Opera，event.keyCode 中保存字符的ASCII编码。

（3）DOM3级变化（了解）

1. DOM3 级事件改变：键盘事件不再包含 charCode 属性，包含两个新属性： key 和 char。
   按下字符键，key 值是相应的文本字符（如“k”或“M”），char 行为与 key 相同；
   按下非字符键，key 值是相应键的名（如“Shift”或“Down”），char 值为 null。
   由于跨浏览器问题，不推荐使用 key、char 以及 keyIdentifier 。

2. DOM3 级事件添加了一个 location 属性：表示按下了什么位置上的键（数值）。
   跨浏览器开发中不推荐使用。

3. event.getModifierState()：获取修改键的活动状态。
   一个参数：Shift、Control、AltGraph 或 Meta 的字符串，表示要检测的修改键。
   返回值：如果指定的修改键是活动的（也就是处于被按下的状态），返回 true，否则返回 false。
   不实用，一是 shiftKey、altKey、ctrlKey 和 metaKey 可以获取结果，二是只有IE9支持。

（4）textInput 事件

“DOM3 级事件”规范中引入了一个新事件：textInput 事件。当用户在可编辑区域中输入字符时，就会触发这个事件。
用于替代 keypress 的 textInput 事件的行为稍有不同：
（1）任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput事件。（2）textInput 事件只会在用户按下能够输入实际字符的键时才会被触发，而 keypress事件则在按下那些能够影响文本显示的键时也会触发（例如退格键）。

textInput 事件主要考虑的是字符，event.data 属性：值就是用户输入的字符（而非字符编码）。
event.inputMethod 属性：表示把文本输入到文本框中的方式。（0~9不同方式详见P383）
事件的浏览器支持：IE9+、Safari 和 Chrome。
inputMethod 的浏览器支持：IE。

（5）设备中的键盘事件（了解）

任天堂 Wii 会在用户按下 Wii 遥控器上的按键时触发键盘事件。
iOS 版 Safari 和 Android 版 WebKit 在使用屏幕键盘时会触发键盘事件。

5. 复合事件（了解）

复合事件(composition event)：DOM3 级事件中新添加的一类事件，用于处理 IME 的输入序列。
IME(Input Method Editor，输入法编辑器)可以让用户输入在物理键盘上找不到的字符。例如，使用拉丁文键盘的用户通过 IME 照样能输入日文字符。IME 通常需要同时按住多个键，但最终只输入一个字符。

3种复合事件：
compositionstart：在 IME 的文本复合系统打开时触发，表示要开始输入了。
compositionupdate：在向输入字段中插入新字符时触发。
compositionend：在 IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。

与文本事件类似，比文本事件多个属性 event.data：
compositionstart 事件中 - 包含正在编辑的文本（例如已经选中的需要马上替换的文本）；
compositionupdate 事件中 - 包含正插入的新字符；
compositionend 事件中 - 包含此次输入会话中插入的所有字符。

用处不大，只有 IE9+ 支持（截至2011年）

6. 变动事件（了解）

DOM2 级的变动（mutation）事件能在 DOM中的某一部分发生变化时给出提示。变动事件是为 XML或 HTML DOM设计的，并不特定于某种语言。

DOM2 级定义了如下变动事件：
DOMSubtreeModified：在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
DOMNodeRemoved：在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 之后触发。
DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 之后触发。
DOMAttrModified：在特性被修改之后触发。
DOMCharacterDataModified：在文本节点的值发生变化时触发。

浏览器支持：IE9+、Opera 9+、Firefox 3+、Safari 3+ 及 Chrome。
浏览器是否支持检测：
var isSupported = document.implementation.hasFeature("MutationEvents", "2.0");
DOM3 级事件模块作废了很多变动事件。

删除节点

• 在使用 removeChild() 或 replaceChild() 从DOM中删除节点时，首先会触发 DOMNodeRemoved 事件。
  这个事件的目标（ event.target ）是被删除的节点，而 event.relatedNode 属性中包含着对目标节点父节点的引用。
  在这个事件触发时，节点尚未从其父节点删除，因此其 parentNode 属性仍然指向父节点（与 event.relatedNode 相同）。
  这个事件会冒泡，因而可以在 DOM 的任何层次上面处理它。
• 如果被移除的节点包含子节点，那么在其所有子节点以及这个被移除的节点上会相继触发 DOMNodeRemovedFromDocument 事件。
  但这个事件不会冒泡，所以只有直接指定给其中一个子节点的事件处理程序才会被调用。
  这个事件的目标是相应的子节点或者那个被移除的节点，除此之外 event 对象中不包含其他信息。
• 紧随其后触发的是 DOMSubtreeModified 事件。
  这个事件的目标是被移除节点的父节点；此时的 event 对象也不会提供与事件相关的其他信息。

插入节点

• 在使用 appendChild()、replaceChild() 或 insertBefore() 向 DOM 中插入节点时，首先会触发 DOMNodeInserted 事件。
  这个事件的目标是被插入的节点，而 event.relatedNode 属性中包含一个对父节点的引用。
  在这个事件触发时，节点已经被插入到了新的父节点中。
  这个事件是冒泡的，因此可以在 DOM的各个层次上处理它。
• 紧接着，会在新插入的节点上面触发 DOMNodeInsertedIntoDocument 事件。
  这个事件不冒泡，因此必须在插入节点之前为它添加这个事件处理程序。
  这个事件的目标是被插入的节点，除此之外 event 对象中不包含其他信息。
• 最后一个触发的事件是 DOMSubtreeModified。
  事件目标是新插入节点的父节点。

7. HTML5 事件（了解）

DOM 规范没有涵盖所有浏览器支持的所有事件。HTML5 详尽列出了浏览器应该支持的所有事件。这里只列出其中得到浏览器完善支持的事件。

（1）contextmenu 事件

contextmenu 事件：表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
由于 contextmenu 事件是冒泡的，因此可以为 document 指定一个事件处理程序，用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。
在所有浏览器中都可以取消这个事件：在兼容 DOM 的浏览器中，使用 event.preventDefalut()；在 IE 中，将 event.returnValue 的值设置为 false。
因为 contextmenu 事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。
通常使用 contextmenu 事件来显示自定义的上下文菜单，使用 onclick 事件处理程序来隐藏该菜单。
浏览器支持：IE、Firefox、Safari、Chrome 和 Opera 11+。

（2）beforeunload 事件

window 对象上的 beforeunload 事件：在浏览器卸载页面之前触发，告知用户页面即将被卸载，询问用户是否真的要关闭页面，还是希望继续留下来。
为了显示弹出对话框，必须将 event.returnValue 的值设置为要显示给用户的字符串（对 IE 及 Fiefox），同时作为函数的值返回（对 Safari 和 Chrome）。
浏览器支持：IE、Firefox、Safari 和 Chrome。

（3）DOMContentLoaded 事件

DOMContentLoaded 事件：在形成完整的 DOM树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。
与 load 事件不同，DOMContentLoaded 支持在页面下载的早期添加事件处理程序，意味着用户能够尽早地与页面进行交互。
要处理 DOMContentLoaded 事件，可以为 document 或 window 添加相应的事件处理程序（尽管这个事件会冒泡到 window ，但它的目标实际上是 document ）。
这个事件始终都会在 load 事件之前触发。
浏览器支持：IE9+、Firefox、Chrome、Safari 3.1+ 和 Opera 9+。

（4）readystatechange 事件

readystatechange 事件：提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。
event.readyState 属性：
uninitialized(未初始化)：对象存在但尚未初始化。
loading(正在加载)：对象正在加载数据。
loaded(加载完毕)：对象加载数据完成。
interactive(交互)：可以操作对象了，但还没有完全加载。
complete(完成)：对象已经加载完毕。
并非所有对象都会经历 readyState 的这几个阶段。

在与 load 事件一起使用时，无法预测两个事件触发的先后顺序。
交互阶段可能会早于也可能会晚于完成阶段出现，无法确保顺序。为了尽可能抢到先机，有必要同时检测交互和完成阶段。
浏览器支持：IE、Firfox 4+ 和 Opera。

<script>(IE 和 Opera) 和 <link>(仅 IE) 元素也会触发 readystatechange 事件，可以用来确定外部的 JavaScript 和 CSS 文件是否已经加载完成。
重点：一并检测 readyState 的两个状态，并在调用了一次事件处理程序后就将其移除。

（5）pageshow 和 pagehide 事件

事件背景：Firefox 和 Opera 有一个特性，名叫“往返缓存”（back-forward cache，或 bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了 DOM 和 JavaScript 的状态；实际上是将整个页面都保存在了内存里。如果页面位于 bfcache 中，那么再次打开该页面时就不会触发 load 事件。

pageshow 事件：在页面显示时触发，无论该页面是否来自 bfcache。
在重新加载的页面中， pageshow 会在 load 事件触发后触发；对于 bfcache 中的页面， pageshow 会在页面状态完全恢复的那一刻触发。
注意：虽然事件目标是 document，但必须将其事件处理程序添加到 window 。
event.persisted 属性：布尔值，页面是否被保存在了 bfcache 中。

pagehide 事件：在浏览器卸载页面的时候触发，而且是在 unload 事件之前触发。
pagehide 在 document 上面触发，但其事件处理程序必须要添加到 window 对象。

浏览器支持：Firefox、Safari 5+、Chrome 和 Opera。IE 9及之前版本不支持。

（6）hashchange 事件

hashchange 事件：URL 参数列表（及 URL 中“#”号后面的所有字符串）发生变化时就会调用。
必须要把 hashchange 事件处理程序添加给 window 对象。
event 对象额外包含两个属性：oldURL 和 newURL。分别保存着参数列表变化前后的完整 URL。

hashchange 事件浏览器支持：IE8+、Firefox 3.6+、Safari 5+、Chrome 和 Opera 10.6+。
oldURL 和 newURL 浏览器支持：Firefox 6+、Chrome 和 Opera。
最好是使用 location对象（location.hash）来确定当前的参数列表。

8. 设备事件（了解）

设备事件（device event）可以让开发人员确定用户在怎样使用设备。

（1）orientationchange 事件

苹果公司为移动 Safari 中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。

移动 Safari 的 window.orientation 属性中可能包含 3 个值：
0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模式（“主屏幕”按钮在左侧）。
180 表示 iPhone 头朝下，相关文档中提到，但这种模式至今尚未得到支持。

只要用户改变了设备的查看模式，就会触发 orientationchange 事件。
所有 iOS 设备都支持 orientationchange 事件和 window.orientation 属性。

（2）MozOrientation 事件

Firefox 3.6 为检测设备的方向引入了一个名为 MozOrientation 的新事件。（前缀 Moz 表示这是特定于浏览器开发商的事件，不是标准事件。）
当设备的加速计检测到设备方向改变时，就会触发这个事件。
但这个事件与 iOS 中的 orientationchange 事件不同，该事件只能提供一个平面的方向变化。
MozOrientation 事件是在 window 对象上触发。

event 对象包含三个属性：x、y 和 z。这几个属性的值都介于 1 到 -1 之间，表示不同坐标轴上的方向。
在静止状态下，x 值为 0，y 值为 0，z 值为 1（表示设备处于竖直状态）。如果设备向右倾斜，x 值会减小；反之，向左倾斜，x 值会增大。如果设备向远离用户的方向倾斜，y 值会减小，向接近用户的方向倾斜，y 值会增大。z 轴检测垂直加速度度，1 表示静止不动，在设备移动时值会减小，失重状态下值为 0。

只有带加速计的设备才支持 MozOrientation 事件，包括 Macbook、Lenovo Thinkpad、Windows Mobile 和 Android 设备。

（3）deviceorientation 事件

本质上，DeviceOrientation Event 规范定义的 deviceorientation 事件与 MozOrientation 事件类似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件相同的支持限制。不过， deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。

触发 deviceorientation 事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。事件对象包含以下 5 个属性。
alpha：在围绕 z轴旋转时（即左右旋转时），y 轴的度数差；是一个介于 0 到 360 之间的浮点数。
beta：在围绕 x轴旋转时（即前后旋转时），z轴的度数差；是一个介于 -180到 180之间的浮点数。
gamma：在围绕 y轴旋转时（即扭转设备时），z轴的度数差；是一个介于 -90到 90之间的浮点数。
absolute：布尔值，表示设备是否返回一个绝对值。
compassCalibrated：布尔值，表示设备的指南针是否校准过。

浏览器支持（2011）：iOS 4.2+中的 Safari、Chrome 和 Android 版 WebKit。

（4）devicemotion 事件

DeviceOrientation Event 规范还定义了一个 devicemotion 事件。这个事件是要告诉开发人员设备什么时候移动，而不仅仅是设备方向如何改变。

触发 devicemotion 事件时，事件对象包含以下属性。
acceleration：一个包含 x、y 和 z 属性的对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
accelerationIncludingGravity：一个包含 x 、 y 和 z 属性的对象，在考虑 z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
interval：以毫秒表示的时间值，必须在另一个 devicemotion 事件触发前传入。这个值在每个事件中应该是一个常量。
rotationRate：一个包含表示方向的 alpha、beta 和 gamma 属性的对象。

浏览器支持（2011）：iOS 4.2+中的 Safari、Chrome 和 Android 版 WebKit。

9. 触摸和手势事件

（1）触摸事件

触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。

4个触摸事件：
touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用 preventDefault() 可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
这几个事件都会冒泡，也都可以取消。

每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性：
bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和 metaKey。

触摸事件还包含下列三个用于跟踪触摸的属性：
touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
targetTouchs：特定于事件目标的 Touch 对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。

每个 Touch 对象包含下列属性：
clientX：触摸目标在视口中的 x 坐标。
clientY：触摸目标在视口中的 y 坐标。
identifier：标识触摸的唯一 ID。
pageX：触摸目标在页面中的 x 坐标。
pageY：触摸目标在页面中的 y 坐标。
screenX：触摸目标在屏幕中的 x 坐标。
screenY：触摸目标在屏幕中的 y 坐标。
target：触摸的 DOM 节点目标。

触摸屏幕上的元素时事件顺序：
(1) touchstart (2) mouseover (3) mousemove （一次） (4) mousedown (5) mouseup (6) click (7) touchend

浏览器支持：iOS 版 Safari、Android 版 WebKit、bada 版 Dolfin、OS6+中的 BlackBerry WebKit、Opera Mobile 10.1+ 和 LG 专有 OS 中的 Phantom 浏览器。目前只有 iOS 版 Safari 支持多点触摸。桌面版 Firefox 6+和 Chrome 也支持触摸事件。

（2）手势事件

当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。

3个手势事件：
gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend：当任何一个手指从屏幕上面移开时触发。

只有两个手指都触摸到事件的接收容器时才会触发这些事件。由于这些事件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。

与触摸事件一样，每个手势事件的 event 对象都包含着标准的鼠标事件属性：
bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和 metaKey。

包含两个额外的属性：
rotation：表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从 0 开始）。
scale：表示两个手指间距离的变化情况（例如向内收缩会缩短距离）；这个值从 1 开始，并随距离拉大而增长，随距离缩短而减小。

---

上一篇：31-JavaScript高级程序设计-事件类型(上)
下一篇：33-JavaScript高级程序设计-性能&模拟事件

全书整理版：《Javascript高级程序设计》第3版（总结版）

---