JS（十一）事件类型

来源：互联网发布：知乎入门级古典音乐编辑：程序博客网时间：2024/06/06 01:33

“DOM3级事件”规定了以下几类事件：

1、UI事件，当用户与页面上的元素交互时触发；

2、焦点事件，当元素获得或失去焦点时触发；

3、鼠标事件，当用户通过鼠标在页面上执行操作时触发；

4、滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

5、文本事件，当在文档中输入文本时触发；

6、键盘事件，当用户通过键盘在页面上执行操作时触发；

7、合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；

8、变动事件，当底层 DOM结构发生变化时触发。

此外，HTML5 也定义了一组事件，而有些浏览器还会在DOM和BOM中实现其他专有事件。这些专有的事件一般都是根据开发人员需求定制的，没有什么规范，因此不同浏览器的实现有可能不一致。

一、UI事件

UI 事件指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种或那种形式存在的，而在DOM规范中保留是为了向后兼容。
1、DOMActivate：表示元素已经被用户操作（通过鼠标或键盘）激活。这个事件在DOM3级事件中被废弃，但Firefox 2+和Chrome支持它。考虑到不同浏览器实现的差异，不建议使用这个事件。

2、load：当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕在<object>元素上面触发。

当页面完全加载后（包括所有图像、 JavaScript 文件、CSS 文件等外部资源），就会触发 window 上面的 load 事件。有两种定义 onload 事件处理程序的方式。

第一种方式是使用如下所示的 JavaScript 代码：

EventUtil.addHandler(window, "load", function(event){alert("Loaded!");});

第二种指定 onload 事件处理程序的方式是为<body>元素添加一个 onload 特性：

<!DOCTYPE html><html><head><title>Load Event Example</title></head><body onload="alert('Loaded!')"></body></html>

尽可能使用 JavaScript 方式。

在不属于 DOM 文档的图像（包括未添加到文档的<img>元素和 Image 对象）上触发 load 事件时， IE8 及之前版本不会生成 event 对象。 IE9 修复了这个问题。

在 IE9+、 Firefox、 Opera、 Chrome 和 Safari 3+及更高版本中， <script>元素也会触发 load 事件，以便开发人员确定动态加载的 JavaScript 文件是否加载完毕。

EventUtil.addHandler(window, "load", function(){var script = document.createElement("script");EventUtil.addHandler(script, "load", function(event){alert("Loaded");});script.src = "example.js";document.body.appendChild(script);});

IE 和 Opera 还支持<link>元素上的 load 事件，以便开发人员确定样式表是否加载完毕。

EventUtil.addHandler(window, "load", function(){var link = document.createElement("link");link.type = "text/css";link.rel= "stylesheet";EventUtil.addHandler(link, "load", function(event){alert("css loaded");});link.href = "example.css";document.getElementsByTagName("head")[0].appendChild(link);});

3、unload：当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。只要用户从一个页面切换到另一个页面，就会发生 unload 事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。
与 load 事件类似，也有两种指定 onunload 事件处理程序的方式。

根据“DOM2 级事件”，应该在<body>元素而非 window 对象上面触发 unload事件。不过，所有浏览器都在 window 上实现了 unload 事件，以确保向后兼容。

4、 abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。

5、error：当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。

6、select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发。

7、resize：当窗口或框架的大小变化时在window或框架上面触发。

关于何时会触发 resize 事件，不同浏览器有不同的机制。 IE、 Safari、 Chrome 和 Opera 会在浏览器窗口变化了 1 像素时就触发 resize 事件，然后随着变化不断重复触发。Firefox 则只会在用户停止调整窗口大小时才会触发 resize 事件。

浏览器窗口最小化或最大化时也会触发 resize 事件。

8、scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。

虽然 scroll事件是在window对象上发生的，但它实际表示的则是页面中相应元素的变化。在混杂模式下，可以通过<body>元素的scrollLeft和scrollTop来监控到这一变化；而在标准模式下，除Safari之外的所有浏览器都会通过<html>元素来反映这一变化（Safari仍然基于<body>跟踪滚动位置）。

EventUtil.addHandler(window, "scroll", function(event){if (document.compatMode == "CSS1Compat"){alert(document.documentElement.scrollTop);} else {alert(document.body.scrollTop);}});

与 resize 事件类似， scroll 事件也会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单 。

多数这些事件都与 window对象或表单控件相关。要确定浏览器是否支持DOM2级事件规定的HTML事件，可以使用如下代码：

var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0");

二、焦点事件

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。有以下6个焦点事件。
1、blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
2、DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusIn，选择了focusin。
3、DOMFocusOut：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusOut，选择了focusout。
4、focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
5、focusin：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。

6、focusout：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。

当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
(1) focusout 在失去焦点的元素上触发；
(2) focusin 在获得焦点的元素上触发；
(3) blur 在失去焦点的元素上触发；
(4) DOMFocusOut 在失去焦点的元素上触发；
(5) focus 在获得焦点的元素上触发；
(6) DOMFocusIn 在获得焦点的元素上触发。
其中， blur、 DOMFocusOut 和 focusout的事件目标是失去焦点的元素；而focus、DOMFocusIn和focusin的事件目标是获得焦点的元素。
三、鼠标与滚轮事件

DOM3 级事件中定义了9个鼠标事件：

1、click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
2、 dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准。
3、mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
4、mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
5、mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
6、mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
7、mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
8、mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
9、mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

只有在同一个元素上相继触发 mousedown和mouseup事件，才会触发click 事件；如果mousedown或mouseup中的一个被取消，就不会触发click事件。类似地，只有触发两次click事件，才会触发一次dblclick事件。如果有代码阻止了连续两次触发click事件（可能是直接取消click事件，也可能通过取消mousedown或mouseup间接实现），那么就不会触发dblclick事件了。这 4个事件触发的顺序始终如下：
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick
显然， click 和 dblclick 事件都会依赖于其他先行事件的触发；而mousedown和mouseup则不受其他事件的影响。IE8及之前版本中的实现有一个小bug，因此在双击事件中，会跳过第二个mousedown和click事件，其顺序如下：
(1) mousedown
(2) mouseup
(3) click
(4) mouseup
(5) dblclick
IE9 修复了这个 bug，之后顺序就正确了。
DOM3 级事件的 feature名是"MouseEvent"，而非"MouseEvents 。

1、客户区坐标位置。事件对象的clientX和clientY属性中
2、页面坐标位置。通过事件对象的 pageX 和pageY属性在页面没有滚动的情况下，pageX和 pageY的值与clientX和clientY 的值相等。

IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body（混杂模式）或document.documentElement（标准模式）中的scrollLeft和scrollTop属性。计算过程如下所示：

var div = document.getElementById("myDiv");EventUtil.addHandler(div, "click", function(event){event = EventUtil.getEvent(event);var pageX = event.pageX,pageY = event.pageY;if (pageX === undefined){pageX = event.clientX + (document.body.scrollLeft ||document.documentElement.scrollLeft);}if (pageY === undefined){pageY = event.clientY + (document.body.scrollTop ||document.documentElement.scrollTop);}alert("Page coordinates: " + pageX + "," + pageY);});

3、屏幕坐标位置相对于整个电脑屏幕的位置 screenX 和 screenY
DOM 通过 event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE8及之前版本不支持relatedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的 fromElement属性中保存了相关元素；在mouseout事件触发时，IE的 toElement属性中保存着相关元素。（IE9支持所有这些属性。）可以把下面这个跨浏览器取得相关元素的方法添加到EventUtil对象中。

var EventUtil = {//省略了其他代码getRelatedTarget: function(event){if (event.relatedTarget){return event.relatedTarget;} else if (event.toElement){return event.toElement;} else if (event.fromElement){return event.fromElement;} else {return null;}},//省略了其他代码};

4、鼠标按钮

DOM 的button属性可能有如下3个值： 0表示主鼠标按钮，1表示中间的鼠标按钮（鼠标滚轮按钮），2表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键。
IE8 及之前版本也提供了 button 属性，但这个属性的值与 DOM 的 button属性有很大差异。
0：表示没有按下按钮。
1：表示按下了主鼠标按钮。
2：表示按下了次鼠标按钮。
3：表示同时按下了主、次鼠标按钮。
4：表示按下了中间的鼠标按钮。

5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
7：表示同时按下了三个鼠标按钮。
对于鼠标事件来说， detail 中包含了一个数值，表示在给定位置上发生了多少次单击。在同一个元素上相继地发生一次 mousedown和一次mouseup事件算作一次单击。detail属性从 1 开始计数，每次单击发生后都会递增。如果鼠标在mousedown和mouseup之间移动了位置，则detail 会被重置为 0。
5、鼠标滚轮

与 mousewheel事件对应的event对象除包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮时，wheelDelta是120的倍数。由于mousewheel事件非常流行，而且所有浏览器都支持它，所以HTML 5也加入了该事件。

Firefox 支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。与mousewheel事件一样，DOMMouseScroll也被视为鼠标事件，因而包含与鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中，当向前滚动鼠标滚轮时，这个属性的值是-3的倍数，当向后滚动鼠标滚轮时，这个属性的值是3的倍数。

var EventUtil = {//省略了其他代码getWheelDelta: function(event){if (event.wheelDelta){return (client.engine.opera && client.engine.opera < 9.5 ?-event.wheelDelta : event.wheelDelta);} else {return -event.detail * 40;}},//省略了其他代码};

有了这个方法之后，就可以将相同的事件处理程序指定给mousewheel和DOMMouseScroll事件了

(function(){function handleMouseWheel(event){event = EventUtil.getEvent(event);var delta = EventUtil.getWheelDelta(event);alert(delta);}EventUtil.addHandler(document, "mousewheel", handleMouseWheel);EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);})();

6、触摸设备

1、不支持 dblclick事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。
2、轻击可单击元素会触发 mousemove 事件。如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，那么会依次发生mousedown、mouseup和click事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或者那些已经被指定了onclick事件处理程序的元素。
3、mousemove 事件也会触发 mouseover 和 mouseout 事件。
4、两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。
四、键盘与文本事件

“DOM2级事件”最初规定了键盘事件，但在最终定稿之前又删除了相应的内容。结果，对键盘事件的支持主要遵循的是DOM0级。
“DOM3 级事件”为键盘事件制定了规范，IE9率先完全实现了该规范。其他浏览器也在着手实现这
一标准，但仍然有很多遗留的问题。有 3 个键盘事件，简述如下。
1、 keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
2、keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。
3、keyup：当用户释放键盘上的键时触发。
虽然所有元素都支持以上 3 个事件，但只有在用户通过文本框输入文本时才最常用到。
只有一个文本事件： textInput。这个事件是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。
键盘事件与鼠标事件一样，都支持相同的修改键。而且，键盘事件的事件对象中也有 shiftKey、ctrlKey、altKey和metaKey属性。IE 不支持metaKey。
1、键码event 对象的 keyCode属性中会包含一个代码，keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。DOM和IE的event对象都支持keyCode属性。
2、字符编码 IE9、Firefox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII编码。IE8及之前版本和Opera则是在keyCode 中保存字符的ASCII编码。

跨浏览器获取字符编码：

var EventUtil = {//省略的代码getCharCode: function(event){if (typeof event.charCode == "number"){return event.charCode;} else {return event.keyCode;}},//省略的代码};

3、DOM3级变化
DOM3级事件中的键盘事件，不再包含 charCode 属性，而是包含两个新属性： key 和 char。
key 属性是为了取代 keyCode而新增的，它的值是一个字符串。而char属性在按下字符键时的行为与key相同，但在按下非字符键时值为null。
IE9 支持 key属性，但不支持char属性。Safari 5和Chrome支持名为keyIdentifier的属性，在按下非字符键（例如Shift）的情况下与key的值相同。对于字符键，keyIdentifier返回一个格式类似“U+0000”的字符串，表示Unicode值。
DOM3 级事件还添加了一个名为 location 的属性，这是一个数值，表示按下了什么位置上的键：0表示默认键盘，1表示左侧位置（例如左位的Alt 键）， 2表示右侧位置（例如右侧的Shift键），3表示数字小键盘，4表示移动设备键盘（也就是虚拟键盘），5表示手柄（如任天堂Wii控制器）。 IE9支持这个属性。Safari和Chrome支持名为keyLocation的等价属性，但即有bug——值始终是0，除非按下了数字键盘（此时，值为3）；否则，不会是1、2、4、5 。
4、textInput 事件
当用户在可编辑区域中输入字符时，就会触发这个事件。和keypress区别：
区别之一就是任何可以获得焦点的元素都可以触发 keypress事件，但只有可编辑区域才能触发textInput事件。

区别之二是 textInput事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发（例如退格键）

由于 textInput事件主要考虑的是字符，因此它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符（而非字符编码）。

五、复合事件

复合事件（composition event）是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。IME通常需要同时按住多个键，但最终只输入一个字符。复合事件就是针对检测和处理这种输入而设计的。有以下三种复合事件。
1、compositionstart：在 IME 的文本复合系统打开时触发，表示要开始输入了。

2、compositionupdate：在向输入字段中插入新字符时触发。

3、compositionend：在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态。

复合事件与文本事件在很多方面都很相似。在触发复合事件时，目标是接收文本的输入字段。但它比文本事件的事件对象多一个属性data，其中包含以下几个值中的一个：
 如果在 compositionstart 事件发生时访问，包含正在编辑的文本（例如，已经选中的需要马上替换的文本）；
 如果在 compositionupdate事件发生时访问，包含正插入的新字符；
 如果在 compositionend事件发生时访问，包含此次输入会话中插入的所有字符。
与文本事件一样，必要时可以利用复合事件来筛选输入。 IE9+是到 2011 年唯一支持复合事件的浏览器。由于缺少支持，对于需要开发跨浏览器应用的开发人员，它的用处不大。要确定浏览器是否支持复合事件，可以使用以下代码：

var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0");

六、变动事件

DOM2 级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示。变动事件是为XML或HTML DOM设计的，并不特定于某种语言。DOM2级定义了如下变动事件。
1、DOMSubtreeModified：在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
2、DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
3、DOMNodeRemoved：在节点从其父节点中被移除时触发。
4、DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发。
5、DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
6、DOMAttrModified：在特性被修改之后触发。
7、DOMCharacterDataModified：在文本节点的值发生变化时触发。
IE8 及更早版本不支持任何变动事件。
事件 Opera 9+ Firefox 3+ Safari 3+及Chrome IE9+
DOMSubtreeModified －支持支持支持
DOMNodeInserted 支持支持支持支持
DOMNodeRemoved 支持支持支持支持
由于 DOM3级事件模块作废了很多变动事件，所以本节只介绍那些将来仍然会得到支持的事件。

1、删除节点
2、插入节点
七、HTML5事件
1、contextmenu 事件

在兼容 DOM的浏览器中，使用event.preventDefalut()；在IE中，将event.returnValue的值设置为false。因为contextmenu事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。
支持 contextmenu 事件的浏览器有IE、Firefox、Safari、Chrome和Opera 11+。
2、beforeunload 事件

之所以有发生在 window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。

IE 和Firefox、Safari和Chrome都支持beforeunload事件，Opera 11及之前的版本不支持beforeunload事件。
3、DOMContentLoaded 事件
DOMContentLoaded 事件在形成完整的 DOM 树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。与load事件同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。要处理DOMContentLoaded事件，可以为document或window 添加相应的事件处理程序（尽管这个事件会冒泡到window，但它的目标实际上是document）。
IE9+、 Firefox、Chrome、Safari 3.1+和Opera 9+都支持DOMContentLoaded事件，通常这个事件既可以添加事件处理程序，也可以执行其他DOM操作。这个事件始终都会在load事件之前触发。
4、readystatechange 事件
IE 为 DOM文档中的某些部分提供了readystatechange事件。这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持readystatechange事件的每个对象都有一个readyState属性，可能包含下列5个值中的一个。
uninitialized（未初始化）：对象存在但尚未初始化。
loading（正在加载）：对象正在加载数据。
loaded（加载完毕）：对象加载数据完成。
interactive（交互）：可以操作对象了，但还没有完全加载。
complete（完成）：对象已经加载完毕。
readystatechange 事件经常会少于4次，而readyState属性的值也不总是连续的。
支持 readystatechange 事件的浏览器有 IE、Firfox 4+和Opera。
虽然使用 readystatechange 可以十分近似地模拟 DOMContentLoaded事件，但它们本质上还是不同的。在不同页面中，load事件与readystatechange事件并不能保证以相同的顺序触发。
5、 pageshow 和pagehide事件
FireFox和Opera有一个特性叫做“往返缓存”，可以使用户使用浏览器的“前进”和“后退”两个按钮时加快页面的转换速度。缓存中不仅保存着页面数据，还保存着DOM和JavaScript的状态，实际上是整个页面都保存在了内存中。FireFox提供了新的事件。

一是pageshow在页面显示时触发，无论该页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。另外注意，虽然这个时间的目标是document，但必须将其事件处理程序添加到window。

pageshow事件的对象还包含着一个名为persisted的布尔属性，如果页面被保存在bfcache中为true，否则为false。

二是pagehide事件，该事件会在浏览器卸载页面时在document上触发，但必须要添加到window对象上，这个时间也包含persisted属性。

支持 pageshow和 pagehide 事件的浏览器有 Firefox、Safari 5+、 Chrome 和 Opera。IE9 及之前版本不支持这两个事件。

指定了 onunload事件处理程序的页面会被自动排除在 bfcache之外，即使事件处理程序是空的。原因在于， onunload最常用于撤销在 onload 中所执行的操作，而跳过 onload 后再次显示页面很可能就会导致页面不正常。
6、hashchange 事件

HTML5 新增了hashchange 事件，以便在URL 的参数列表（及 URL 中“#”号后面的所有字符串）发生变化时通知开发人员。之所以新增这个事件，是因为在Ajax 应用中，开发人员经常要利用URL 参数列表来保存状态或导航信息。
必须要把 hashchange 事件处理程序添加给window 对象，然后 URL 参数列表只要变化就会调用它。此时的 event 对象应该额外包含两个属性： oldURL 和 newURL。这两个属性分别保存着参数列表变化前后的完整URL。
支持 hashchange 事件的浏览器有IE8+、 Firefox 3.6+、Safari 5+、 Chrome 和 Opera 10.6+。在这些浏览器中，只有Firefox 6+、Chrome和 Opera 支持oldURL 和 newURL属性。为此，最好是使用 location对象来确定当前的参数列表。
如果 IE8 是在IE7 文档模式下运行，即使功能无效它也会返回true。为解决这个问题，可以使用以下这个更稳妥的检测方式：

var isSupported = ("onhashchange" in window) && (document.documentMode ===undefined || document.documentMode > 7);

八、设备事件

待续。

阅读全文

0 0