javascrit 中事件Event（三）— HTML5事件

    这篇主要概述HTML5事件，在HTML5中的事件中对Event进行了扩展，新增了一些新的事件，如contextmenu，beforeunload，DOMContentLoaded，readystatechange事件等。下面讲解重点用的多的几个事件。

1、beforeunload：在浏览器关闭（卸载）之前触发，可以通过它取消关闭（卸载）并继续使用原有页面。

例：关闭页面前弹出提示框提示用户是否关闭页面。

EventUtil.addEvent(window, 'beforeunload', function(event) {

    event = EventUtil.getEvent(event);

    var message = "是否关闭页面？"

    event.returnValue = message;

    return message;

})

注：1）为显示弹窗，必须将event.returnValue 设置为要显示的的字符串。

       2）Opera 11 及之前的版本不支持此事件，IE、firefox、safari、chrome都支持此事件。

 

2、DOMContentLoaded事件： 在页面形成完整的DOM树之后触发，无论图片，js文件，css文件或其他资源是否下载完成。

    DOMContentLoaded事件虽然冒泡到window，但它实际的target是document。     

 EventUtil.addEvent(document, 'DOMContentLoaded', functioin(){

   console.log('content loaded');

 })

    1）支持此事件的浏览器，可直接对document 或window对象添加事件处理程序；浏览器包括IE9+，FireFox，Chrome，Safari3.1+和Opera 9+。

    2）不支持此事件的浏览器，可在页面加载时设置一个时间为0的定时器。        

  setTimeout(function() {

        //添加事件处理方法

  },0)；

    在页面下载和构建期间，只有一个JavaScript处理程序，因此定时调用会在改过程结束后立即触发。

    3）DOMContentLoaded始终会在load事件之前触发。

 

3、readystatechange：提供与文档火元素的加载状态有关的信息，IE为DOM文档中的某些部分提供了此事件。  
 

uninitialized	未初始化
loading	正在加载数据中
loaded	已加载数据完成
interactive	可以操作对象了
complete	对象已加载完成

    1）对document而言，readystatechange处在interactiv阶段与DOMContentLoaded大致相同。在与load事件一起使用时，无法预测俩个事件的触发的先后顺序。   
    2）支持readystatechange事件的浏览器有IE，FireFox和Opera。

    3） 示例为script 监听readystatechange事件       

  EventUtil.addEvent(window, 'load', function(){

        var script = document.createElement('script');

        EventUtil.addEvent(script, 'readystatechange', functioin(event) {

            event = EventUtil.getEvent(event);

            var targett = EventUtil.getTarget(event);

            if (target.readyState == 'loaded' || target.readySate == 'complete' ) {

                EventUtil.removeEvent(target, 'readystatechange', arguments.callee);

                console.log('script loaded')

            }

        });

    })

4、pageshow和pagehide：页面显示或隐藏事触发的事件。

     这里有个特性往返缓存bfcache(back-forward cache)需先说明，bfcache保存着页面数据，同时保存DOM和JavaScript的状态，即将整个页面保存在内存中。若页面保存在bfcache中，将不触发页面的load事件。

 

    1）pageshow：在页面显示时触发，无论页面是否来自bfcache。第一次进入（未缓存）的页面，将在load事件触发后触发pageshow方法。

         pageshow事件的event对象包含一个名为persisted的布尔值属性，标示页面是否保存在bfcache中；页面保存在bfcache中，persisted为true；否则为false。           

  EventUtil.addEvent(window, 'pageshow', functioin(event) {

     console.log(event.persisted); 

  })

     2）pagehide：在页面卸载时触发，在页面的unload事件之前触发。

     pageshow，pagehide事件都在document上触发，但事件处理程序必须注册到window对象上。

 

5、hashchange事件：HTML5新增了此方法，但浏览器地址URL发生变化时触发。

     hashchange事件必须注册到window对象上，此事件对象event对象包括了2个新的属性：oldURL和newURL，分别表示变化前后地址。

    支持此事件的浏览器包括：IE8+，FireFox3.6+，Safari5+，Chrome，Opera；其中支持oldURL，newURL属性的只有FireFox，Chrome，Opera。           

EventUtil.addEvent(window, 'hashchange', functioin(event) {

    console.log(event.oldURL + "," + event.newURL); 

 })

6、orientationchange事件：设备横竖屏切换时触发。

    在Safari浏览器中添加了orientationchange事件，在用户将设置横竖屏时切换时触发。同时，在Safari中的window对象中，新增了一个orientation对象，它包含3个值：0 表示竖屏模式；90 表示向左旋转的横向模式， -90 表示向右旋转的横向模式。

EventUtil.addEvent(window, 'orientationchange', functioin(event) {

     console.log( "current orientation is " + window.orientation);  // 0 ,90 , -90

})

  至此，JavaScript的事件event讲完了，有纰漏欢迎指正。