HTML5事件

Html5事件

contextmenu事件

用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

由于此事件时冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素，在浏览器中都可以取消这个事件在兼容DOM的浏览器中，使用event.preventDefaluet()。在ie中，将event.returnValue的值设置为false，因为contextmenu事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有事项，通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。例如：

<!DOCTYPE html>

<html>

<head>

<body>

   <div id=”myDiv”>Right click or Ctrl+click me to get a custom context menu.

       Click anywhere else to get the default context menu.</div>

   <ul id=”myMenu” style=”position:absolute;visibility:hidden;background-color:silver”>

      <li><a href=”http://www.nczonline.net”>Nicholas’ site</a></li>

      <li><a href=”http://www.wrox.com”>Wrox site</a></li>

      <li><a href=”http://www.yahoo.com”>Yahoo!</a></li>

   </ul>

</body>

</html>

这里的div元素包含一个自定义的上下文菜单，其中ul元素作为自定义上下文菜单，并且在初始化时隐藏的，js代码如下：

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.visibility=”visible”;

});

EventUtil.addHandler(document,”click”,function(event){

   Document.getElementById(“myMenu”).style.visibility=”hidden”;

})

});

2. beforeunload事件

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

3. DOMContentLoaded事件

window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而费时间，而DOMContentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、css文件或其他资源是否已经下载完毕，与load事件不同。

对于不支持DOMContentLoaded的浏览器，我们建议在页面加载期间设置一个时间为0毫秒的定时器，如：

setTimeout(function(){

   //在此添加事件处理程序

},0);

这段代码的实际意思就是：“在当前JavaScript处理完成后立即运行这个函数”，在页面下载和构建期间，只有一个JavaScript处理过程，因此定时器会在该过程结束时立即触发，至于这个事件与DOMContentLoaded被触发的时间能否同步，主要还是取决于用户使用的浏览器和页面中的其他代码，为了确保这个方法有效，必须将其作为页面中的第一个超时调用；即便如此，也还是无法保证在所有环境中该超时调用一定会遭遇load事件被触发。

4. readystatechange事件

IE为DOM文档中的某些部分提供了readystatechange事件，这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也是很难预料，支持readystatechange事件的每个对象都有一个readyState属性。

uninitialized（未初始化）：对象存在但未初始化。

loading（正在加载）：对象正在加载数据。

loaded（加载完毕）：对象加载数据完成。

interactive（交互）：可以操作对象了，但还没有完全加载。

complete（完成）：对象已经加载完毕。

这些状态看起来很直观，但并非所有对象都会经历readyState的这几个阶段，如果某个阶段不适用某个对象，则该对象完全可能跳过该阶段，并没有规定哪个阶段适用哪个对象，显然，这意味着readystatechange事件经常会少于4次，而readyState属性的值也不总是连续的。

对应document而言，值为“interactive”的readyState会在于DOMContentLoaded大致相同的时刻触发readystatechange事件，此时，DOM树已经加载完毕，可以安全地操作它，因此就会进入交互阶段。但与此同时，图像及其他外部文件不一定可用。下面来看一段处理readystatechange事件的代码。

EventUtil.addHandler(document,”readystatechange”,function(event){

     If(document.readyState==”interactive”){

       alert(“Content loaded”);

}

})

5. pageshow和pagehide事件

Firefox和Opera有一个特性，名叫“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度，这个缓存中不仅保存着页面的数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里，如果页面位于bfcache中，那么再次打开该页面时不会触发load事件，尽管由于内存中保存了整个页面的状态，不触发load事件也不应该会导致失明问题。

第一个事件是pageshow，这个事件在页面显示时触发，无论该页面是否来着bfcache，在重新加载的页面中，pageshow会在load事件触发后触发，而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。看下面例子：

(function(){

   var showCount=0;

   EventUtil.addHandler(window,”load”,function(){

   alert(“Load fired”);

});

EventUtil.addHandler(window,”pageshow”,function(){

  showCount++;

  alert(“Show has been fired ”+showCount+”times.”)

})

})();

除了通常的属性之外，pageshow事件的event对象还包含一个名为persisted的布尔值属性。如果页面被保存在了bfcache中，则这个属性的值为true；否则，这个属性的值为false，可以像下面这样在事件处理程序中检测这个属性。

(function(){

   var showCount=0;

   EventUtil.addHandler(window,”load”,function(){

   alert(“Load fired”);

});

EventUtil.addHandler(window,”pageshow”,function(){

  showCount++;

  alert(“Show has been fired ”+showCount+” time. Persisted? ”+event.persisted);

});

})();

通过检测persisted属性，就可以根据页面在bfcache中的状态来确定是否需要采取其他操作。

与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发，与pageshow事件一样，pagehide在document上触发，但其事件处理程序必须要添加到window对象。这个事件的wvent对象也包含persisted属性，不过其用途稍有不同，例如：

EventUtil.addHandler(window.”pagehide”,function(event){

   alert(“Hiding. Persisted?”+event.persisted);

});

有时候，可能需要在pagehide事件触发时根据persisted的值采取不同的操作，对应pageshow事件，如果页面是从bfcache中加载的，那么persisted的值就是true；对于pagehide事件，如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true，因此，当一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true。

hashchange事件

HTML5新增了haschange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员，之所以新增这个事件，是因为在ajax应用中，开发人员经常要利用URL参数列来保存状态或导航信息。

必须要把hashchange事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它，此时的event对象应该额外包含两个属性：oldURL和newURL，这两个属性分别保存着参数列表变化前后的完整URL。例如：

EventUtil.addHandler(window,”hashchange”,function(event){

  alert(“Old URL:”+event.oldURL+”\nNew URL:”+event.newURL);

});

支持haschange事件的浏览器有ie8+、firefox3.6+、safari5+、chrome和opera10.6+。在这些浏览器中，只有Firefox 6+、Chrome和Opera支持oldURL和newURL属性，为此最后是使用location对象确定当前参数列表。

EventUtil.addHandler(window,”hashchange”,function(event){

   alert(“Current hash:”+loacation.hash);

});

使用以下代码可以检测浏览器是否支持haschange事件：

var isSupported=(“onhashchange” in window);

如果IE8是在IE7文档模式下运行，即使功能无效它也会返回true，为解决这个问题，可以使用一下这个更稳妥的检测方式：

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

HTML5事件

推荐阅读