DOM规范没有涵盖所有浏览器支持的所有事件。HTML5详尽列出了浏览器应该支持的所有事件。
其中得到浏览器完善支持的事件：
-
contextmenu事件
通过单击鼠标右键，可以调出上下文菜单。
开发人员面临的主要问题是：如何确定应该显示上下文菜单，以及如何屏蔽与该操作关联的默认上下文菜单。
解决办法：contextmenu这个事件，用以表示何时应该显示上下文菜单，一遍开发人员取消默认的上下文菜单，而提供自定义的菜单。
EventUtil.addHandler(window,"load",function(event){
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"contextmenu",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);//取消默认上下文菜单var menu=document.getElementById("mymenu"); menu.style.left=event.clientX+'px'; menu.style.top=event.clientY+'px'; menu.style.display="block"; }); EventUtil.addHandler(document,'click',function(event){ document.getElementById("mymenu").style.display='none' }); });
【解释】
- 添加load事件，当页面加载完毕后，执行该事件。
- 当右键单击时，触发
contextmenu事件， - 由于该事件为鼠标事件，所以可以获得鼠标的位置信息。
- 添加click事件，当鼠标单击其他地方时，隐藏该菜单。
- 注意该事件冒泡
-
beforeunload事件
为了让开发人员有可能在页面卸载之前阻止这一操作。这个事件会在浏览器卸载页面之前触发(包括跳转页面以及刷新页面)，可以通过它来取消卸载并继续使用原有页面。
EventUtil.addHandler(window,'beforeunload',function(event){
event=EventUtil.getEvent(event);
var message="im really going to miss you if you go.";
event.returnValue=message;
return message;
})
【困惑】 -
event.returnValue不是IE的事件对象中用于取消默认行为的属性么？ - 这里需要将返回的确认信息赋给这个属性。
- 奇怪的是，当我不写
return message时，完全没有问题，在最新版的各浏览器内。 - 书上说，
event.returnValue=message;这样写是对ie与火狐而言，return message这样写是对webkit内核而言。 -
DOMContentLoaded事件
与window的load事件相比，该事件会在页面中的一切都加载完毕时触发，但这个过程可能因为要加载的外部资源过多而颇费周折。
DOMContentLoaded事件这个事件则在形成完整的dom树之后就触发。不理会图像，js，css文件。
EventUtil.addHandler(document,'DOMContentLoaded',function(event){
alert('content loaded')
})
IE9以前版本的IE浏览器不支持这个事件，书中建议在页面加载期间设置一个时间为0毫秒的超时调用。
setTimeout(function(){
//添加事件处理程序
},0) -
readystatechange事件
这个事件的目的是提供与文档或元素的加载状态有关的信息。
支持这个事件的每个对象都有一个readyState属性，可能包括下列五个值中的一个。 - uninitialized：对象存在，但尚未初始化
- loading：对象正在加载数据
- loaded：对象加载数据完成
- interactive：可以操作对象了，但还没有完全加载完成。
- complete 对象已经加载完毕
- 虽然这些状态看起来很直观，很有顺序，但是，并非所有对象都会经历这四个阶段。
对一般的dom对象，在包含较多外部资源时，交互阶段可能早于完成阶段，但是当页面中包含较少的外部资源时，完成阶段先于交互阶段的可能性更大。
EventUtil.addHandler(document,'readystatechange',function(event){
if(document.readyState=='interactive'||document.readyState=='complete'){
alert('content load');
EventUtil.removeHandler(document,'readystatechange',arguments.callee);
}
})
【解释】
document对象，只要可以操作该对象，我们便可以使用。所以还要满足后两个状态的任意一个就可以。
为了避免该dom对象在满足条件后重复执行事件内容，可以在执行一次后，便移除该对象。 - 通过这种方法，也可以判断，动态添加的外部文件js与css文件是否已经加载完成。
不过由于外部文件较大，有时候会停在loaded阶段，而永远不会完成，有时候又会跳过loaded阶段而直接完成。
EventUtil.addHandler(window,'load',function(){
var script=document.createElement('script');
EventUtil.addHandler(script,'readystatechange',function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.readyState=='loaded'||target.readyState=='complete'){
alert('content load');
EventUtil.removeHandler(target,'readystatechange',arguments.callee);
}
});
script.src='../test.js';
document.body.appendChild(script);
})
测试后，不知道为什么，没有显示alert('content load');,求解释。
- 虽然这些状态看起来很直观，很有顺序，但是，并非所有对象都会经历这四个阶段。
-
pageshow和pagehide事件
在浏览器导航栏上，会有一对前进与后退的按钮，浏览器支持一个名叫往返缓存的特性。当我们打开一个网页，通过这个网页，又打开一个网页，此时可以按住当前网页浏览器的后退按钮，在不重新加载的条件下，回到上一个页面，也就是该页面已经存到这个往返缓存中去啦。
这两个事件，可以更好的理解往返缓存。 - pageshow事件在页面显示时触发，会在load事件触发后触发，无论该页面是否来自往返缓存，都会触发这个事件。当来自往返缓存时，自然就不会触发load事件啦。该事件对象有一个属性，persisted，该属性是一个布尔值，表示该页面是否保存在了往返缓存中。
- pagehide事件，在浏览器卸载页面之前触发，而且在unload事件之前触发。如果页面在卸载之后保存在了往返缓存中，那么persisted的值会被设为true。所以第一次触发pageshow事件时，该属性的值一定为false。
【注意】这两个事件的处理程序必须添加到window对象上。 -
haschange事件
方便程序员知道在URL列表发生变化时，触发这个事件，
这个事件的处理程序应该添加到window对象上。
之所以新增这个事件，是因为在ajax应用中，开发人员经常利用URL参数列表来保存或导航i信息。
该事件对象，包含两个额外的属性 oldURL与newURL，分别保存变换前后的url。
并不是所有的浏览器都支持这些
