JS—HTML5事件

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。

并不是所有的浏览器都支持这些