13.4.7 HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件。很多浏览器处于不同的目的一一满足用户需求或解决特殊问题，还实现了一些自定义的事件。HTML5详尽列出了浏览器应该支持的所有事件。
1、contextmenu事件
如何确定应该显示上下文菜单，以及如何屏蔽与该操作关联的默认上下文菜单。contextmenu这个事件用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
由于contextmenu事件是冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的所有此类事件。
这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件：在兼容DOM的浏览器中，使用event.preventDefalut（）;在IE中，将event.returnValue的值设置为false。
通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。
2、beforeunload事件
之所以有发生在window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。
这个事件会在浏览器卸载页面之前触发，可以通过它来取消并继续使用原有页面。
3、DOMContentLoaded事件
window的load事件会在页面中的 一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而波费周折。
而DOMContentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、Javascript文件、css文件或其他资源是否已经下载完毕。与load事件不同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也意味着用户能够尽早的与页面进行交互。
要处理DOMContentLoaded事件，可以为document或window添加相应的事件处理程序。
EventUtil.addHandler(document."DOMContentLoaded",function(event){
alert("Content loaded");
});
DOMContentLoaded事件对象不会提供任何额外的信息
4、readystatechange事件
这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持readystatechange事件的每个对象都有一个readyState属性，可能包含下列5个值中的 一个：
◆ uninitialized（未初始化）：对象存在但尚未初始化
◆ loading（正在加载）：对象正在加载数据
◆ loaded（加载完毕）：对象加载数据完成
◆ interactive（交互）：可以操作对象了，但还没有完全架子啊
◆ complete（完成）：对象已经加载完毕
并非所有对象都会经历readyState的这几个阶段。如果某个阶段不适用某个对象，则该对象完全可能跳过该阶段；并没有规定哪个阶段适用于哪个对象
5、pageshow和pagehide事件
Firefox和Opera有一个特性，名叫“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和Javascript的状态，实际上是将整个页面都保存在了内存里。
如果页面位于bfcache中，那么在此打开该页面时就不会触发load事件。
6、hashchange事件
HTML5新增了haschange事件，以便在URI的参数列表发生变化时通知开发人员。之所以新增这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数列来保存状态或导航信息。
必须要把hashchange事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它。此时的event对象应该额外包含连个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整URL
13.5 内存和性能
由于事件处理程序可以为现代Web应用程序提供交互能力，因此许多开发人员会不分青红皂白的向页面添加大量的处理程序。
在Javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
导致这问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪事件。
13.5.1 事件委托
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
例如：click事件会一直冒泡到document层次，也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
var list=document.getElementById("myLinks");
EventUtil.addHandler(list."click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title="I changed the document's title";
break;
case "goSomewhere":
location.href="http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
})
在上面这段代码里，我们使用事件委托只为 ul 元素添加了一个onclick事件处理程序。
由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。
事件目标是被单击的列表项，故而可以通过检测id属性来决定采取适当的操作。
这段代码的事前消耗很低，因为只取得了一个DOM元素，只添加了一个事件处理程序，虽然对用户来说最终结果相同，但这种技术需要占用的内存更少。
如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件，这样做与采取传统的做法相比有以下优点：
◆ document对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序。
◆ 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
◆ 整个页面占用的内存空间更少，能够提升整体性能。
最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。
13.5.2 移除事件处理程序
每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的Javascript代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。
可以采用事件委托技术，限制建立的连接数量
另外，在不需要的时候移除事件处理程序，也是解决这个问题的一种方案。
有两种情况会造成内存中留有那些果实不用的“空事件处理程序”，也就是造成Web应用程序内存与性能问题的主要原因。
1）从文档中移除带有事件处理程序的元素时
可能是纯粹的DOM操作，例如使用removeChild（）和replaceChild（）方法，更多的是发生在使用innerHTML替换页面中的 某一部分的时候。
如果带有事件处理程序的元素被innerHTML删除了，那么原来添加到元素中的事件处理程序极有可能无法被当做垃圾回收。
所以在设置innerHTML属性之前，先移除了按钮的事件处理程序。这样就确保了内存可以被再次利用，而从DOM中移除按钮也做到了干净利索。
注意，在事件处理程序中删除按钮也能阻止事件冒泡。目标元素在文档中是事件冒泡的前提。
2）卸载页面的时候
如果在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。每次加载完页面再卸载页面时，内存中滞留的对象数目就会增加，因为事件处理程序占用的内存并没有被释放。
最好的做法就是在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序。
事件委托技术的优势——需要跟踪的事件处理程序越少，移除它们就越容易。
所以只要通过onload事件处理程序添加的东西，最后都要通过onunload事件处理程序将它们移除。
