Professional JS(HTML5 Event/Device Event[part])

1.beforeunload Event
+①window對象上的beforeunload事件，是爲了讓開發人員有可能在頁面卸載之前阻止這一操作。IE,Firefox,Safari,Chrome和Opera 11+支持這個該事件，

EventUtil.addHandler(window,'beforeunload',function(event){
    event=EventUtil.getEvent(event);
    var message="l'm really going to miss you if you go.";
    event.returnValue=message;
    return message;
});

2.The DOMContentLoaded Event
①The window's load event fires when everything on the page has been completely loaded,which may take some time for pages with lots of external resources.The DOMContentLoaded event fires as soon as the DOM tree is completely formed and without regard(關心) to images,JavaScript files,CSS files,or other such resources.

+②To handle the DOMContentLoaded event,you can attach an event handler either on the document or on the window(the target for the event actuallt is document,although it bubbles up to window).

EventUtil.addHandler(document,'DOMContentLoaded',function(event){
    alert('Context loaded');
});

③The event object for DOMContentLoaded doesn't provide any additional information(target is document).

④The DOMContentLoaded event is supported in IE 9+,Firefox,Chrome,Safari 3.1+,and Opera 9+ and is typically used to attach event handlers or perform other DOM manipulations.This event always fires before the load event.

+⑤For browsers that don't support DOMContentLoaded,it has been suggested that a timeout should be set during page loading with a millisecond delay of 0.

setTimeout((function){
    //attach event handlers here
},0);//0毫秒

3.The readystatechange Event
+①IE爲DOM文檔中的某些部分提供了readystatechange事件，用於提供與文檔或元素的加載狀態相關的信息。

EventUtil.addHandler(document,'readystatechange',function(event){
    /*
    支持readystatechange事件的每個對象都有一個readyState屬性：
    1.undefined：對象存在但並未初始化。
    2.loading：對象正在加載數據。
    3.loaded：對象加載數據完成。
    4.interactive：可以操作對象，但還沒有完全加載。
    5.complete：對象已經加載完畢
    */
    if(document.readyState == 'interactive'){
        alert('Content loaded');
    }
});

+②當交互階段與完成階段無法確定順序時，同時檢測這兩個階段。

EventUtil.addHandler(document,'readystatechange',function(event){
    if(document.readyState == 'interactive' || document.readyState == 'complete'){
        EventUtil.addHandler(document,'readystatechange',arguments.callee);
            alert('Content loaded');
    }
});

+③The readystatechange event also fires on <script>(IE and Opera) and <link>(IE only),allowing you to determine when external JavaScript and CSS files have been loaded.

EventUtil.addHandler(window,'load',function(){
    var script=document.createElement('script');
    script.type='text/script';
    //爲新創建的<script>節點指定了一個事件處理程序
    EventUtil.addHandler(script,'readystatechange',function(event){
        event=EventUtil.getEvent(event);
        //該事件的目標是節點本身
        var target=EventUtil.getTarget(event);
        //當觸發readystatechange事件時，需要檢測目標的readyState屬性是否等於"loaded"或"complete"
        if(target.readyState == 'loaded' || target.readyState == 'complete'){
            //如果進入其中任何一個階段，則移除事件處理程序（以防執行兩次）
            EventUtil.removeHandler(target,'readystatechange',arguments.callee){
                alert('Script loaded');
            };
        }
    });
    script.src=example.js;
    document.body.appendChild(script);
});


EventUtil.addHandler(window,'load',function(){
    var link=document.createElement('link');
    link.type='text/css';
    link.rel='stylesheet';

    EventUtil.addHandler(link,'readystatechange',function(event){
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(target.readyState == 'loaded'|| target.readyState == 'complete'){
            EventUtil.removeHandler(link,'readystatechange',arguments.callee){
                alert('CSS loaded');
            };
        }
    });
    link.href='example.css';
    document.getElementsByTagName('head')[0].appendChild(link);
});

4.The pageshow and pagehide Events
①Firefox and Opera introduced a feature(特性) called the back-forward cache(bfcache) designed to speed up page transitions when using the browser's Back and Forward buttons.The cache stores not only page data but also the DOM and JavaScript state,effectively keeping the entire page in memory.If a page is in the bfcache,the load event will not fire when the page is navigated to.This usually doesn't cause an issue since the entire page state is stored.However,Firefox decide to provide some events to give visibility to the bfcache behavior.

+②The first event is pageshow,which fires whenever a page is displayed,whether from the bfcache or not.On a newly loaded page,pageshow fires after the load event;on a page in the bfcache,pageshow fires as soon as the page's state has been completely restored.Note that even though the target of this event is document,the event handler must be attached to window.

(function(){
    var showCount=0;

    EventUtil.addHandler(window,'load',function(){
        alert('Load fired');
    });

    EventUtil.addHandler(window,'pageshow',function(){
        showCount++;
        alert('Show has been fired ' + showCount +' tiems.');
    });
})();

(function(){
    var showCount=0;

    EventUtil.addHandler(window,'load',function(){
        alert('Load fired');
    });

    EventUtil.addHandler(window,'pageshow',function(){
        showCount++;
        //pageshow事件的event對象還有個persisted的布爾值屬性，如果頁面被保存在了bfcache---true
        alert('Show has been fired ' + showCount +' times. Persisted? '+ event.persisted);
    });
})();

+③與pageshow事件相對應的是pagehide事件，該事件會在瀏覽器卸載頁面的時候觸發，而且是在unload事件之前觸發。

EventUtil.addHandler(window,'pagehide',function(event){
    alert('Hiding. Persisted? ' + event.persisted);
});

④支持pageshow和pagehide事件的瀏覽器有Firefox,Chrome,Opera,Safari 5+ 和IE 9+.

？⑤指定了onunload事件處理程序的頁面會被自動排除在bfcache之外，即使事件處理程序是空的。因爲，onunload最常用於撤銷在onload中所執行的操作，而跳過onload後再次顯示頁面很可能會導致頁面不正常。

5.The hashchange Event
①HTML5新增了hashchange事件，以便在URL的參數列表（URL中”#”後面的所有字符串）發生變化時通知開發人員。增加這個事件的原因是爲了在Ajax應用中，方便開發人員通過URL參數列表來保存狀態或導航信息。

+②必須要把hashchange事件處理程序添加給window對象，然後URL參數列表只要變化就會調用它。此時的event對象會額外包含兩個屬性：oldURL和newURL。

EventUtil.addHandler(window,'hashchange',function(event){
    alert('Old URL: ' + event.oldURL + '\nNew URL '+ event.newURL);
});

+③支持hashchange事件的瀏覽器有IE 8+,Firefox 3.6+,Safari 5+,Chrome和Opera 10.6+。只有Firefox 6+,Chrome,Opera支持oldURL和newURL。因此，最好使用location對象來確定當前的參數列表。

EventUtil.addHandler(window,'hashchange',function(event){
    alert('Current hash: '+location.hash);
});



//檢測瀏覽器是否支持hashchange事件

//這裏有個bug，如果IE8是在IE7文檔模式下運行，即使功能無效也返回true
var isSupported=('onhashchange' in window);

//更爲穩妥的檢測方式
var isSupported=('onhashchange' in Window) && (document.documentMode===undefined ||
    document.documentMode>7);

6.Device Event
+①orientationchange事件，用於瞭解何時用戶由橫向查看切換爲縱向查看模式。

EventUtil.addHandler(window,'load',function(event){
    var div=document.getElementById('myDiv');
    div.innerHTML='Current orientation is '+window.orientation;
    EventUtil.addHandler(window,'orientationchange',function(event){
        div.innerHTML='Current orientation is '+window.orientation;
    });
});

another:
①encodeURI/encodeURIComponent/decodeURI/decodeURIComponent

②URI&URL&URN
http://www.cnblogs.com/wuyun-blog/p/5706703.html
a)URI可以分爲URL，URN或同時具備locators和names特性的一個東西。URN的作用就像一個人的名字【身份】，URL就像一個人的家庭住址【如何找到它】。
b)Uniform Resource Identifier/Locator/Name