BOM onload onunload onbeforeload的區別

時間 2019-11-08

標籤 bom onload onunload onbeforeload 區別简体版

原文原文鏈接

Onload,Onunload和onbeforeunload方法的異同
一二種方法比較
1 onload的意思是當頁面加載完畢的時候執行.
2 相同點:Onunload,onbeforeunload都是在刷新或關閉時調用
3 不一樣點:Onbeforeunload是正要去服務器讀取新的頁面時調用,此時還沒開始讀取,而onunload則已經從服務器上讀到了須要加載的新的頁面，在即將替換掉當前頁面時調用。Onunload是沒法阻止頁面的更新和關閉的.Onbeforeunload能夠作到,onbeforeunload在onunload以前執行，它還能夠阻止onunload的執行.
二事件描述
1 onbeforeunload事件：
　說明：目前三大主流瀏覽器中firefox和IE都支持onbeforeunload事件,opera還沒有支持.
描述：事件觸發的時候彈出一個有肯定和取消的對話框，肯定則離開頁面，取消則繼續待在本頁。handler能夠設一個返回值做爲該對話框的顯示文本。
　觸發於：
　　　•關閉瀏覽器窗口
　　　•經過地址欄或收藏夾前往其餘頁面的時候
　　　•點擊返回，前進，刷新，主頁其中一個的時候
　　　•點擊一個前往其餘頁面的url鏈接的時候
　　　•調用如下任意一個事件的時候：
click,document write,document open,document close，window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
　　　•當用window open打開一個頁面,並把本頁的window的名字傳給要打開的頁面的時候。
　　　•從新賦予location.href的值的時候。
　　　•經過input type=」submit」按鈕提交一個具備指定action的表單的時候。
　　能夠用在如下元素：
　　　•BODY, FRAMESET, window
　　平臺支持：
　　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
2 onunload事件
　　描述：當用戶關閉一個頁面時觸發 onunload 事件。
　　觸發於：
　　　•關閉瀏覽器窗口
　　　•經過地址欄或收藏夾前往其餘頁面的時候
　　　•點擊返回，前進，刷新，主頁其中一個的時候
　　　•點擊一個前往其餘頁面的url鏈接的時候
　　　•調用如下任意一個事件的時候：
Click,document write,document open,document close,window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
　　　•當用window open打開一個頁面,並把本頁的window的名字傳給要打開的頁面的時候。
　　　•從新賦予location.href的值的時候。
　　　•經過input type=」submit」按鈕提交一個具備指定action的表單的時候。

示例說明:
google加載相冊的原理:
一個頁面加載最慢的每每是頁面中的大圖，在用google的Picasa 網絡相冊時,google會一共生成7種大小的縮略圖存放在他的服務器上，而後在大圖的瀏覽頁，他會先加載一個縮略圖
，而後等大圖徹底加載後再替換掉原來的縮略圖，實現那種模糊到清晰的效果。
代碼以下:
<body>
<img id="pic" src="small.jpg" />
</body>
<script type="text/javascript">
var p = new Image();
var loaded = false;
p.onload = p.onreadystatechange = function()
{
if (!loaded && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") )
{
document.getElemengtById('pic').src = 'big.jpg';
}
}
p.src="big.jpg";

window.onunload = function()
{
//alert('關閉頁面');
}

window.onbeforeunload = function(e)
{
          var n = window.event.screenX - window.screenLeft;
           var b = n > document.documentElement.scrollWidth-20;
           if(b && window.event.clientY < 0 || window.event.altKey)
           {
                  //這裏能夠放置你想作的操做代碼
// alert("關閉窗口");

           }else{
   // alert("刷新窗口");
   }

           或者這樣：
          event.returnValue="肯定離開當前頁面嗎？";

}
</script>
這段代碼就是判斷觸發onbeforeunload事件時，鼠標是否點擊了關閉按鈕，或者按了ALT+F4來關閉網頁，若是是，則認爲系統是關閉網頁，不然在認爲系統是刷新網頁.
3 onload事件
onload的意思是當頁面加載完畢的時候執行. 當某一事件被觸發時須要執行某個函數，在IE下可用attachEvent，在FF下則要用addEventListener.
示例代碼:
attachEvent()有兩個參數，第一個是事件名稱，第二個是需執行的函數；
addEventListener()有三個參數，第一個是事件名稱，但與IE事件不一樣的是，事件不帶"on",好比"onsubmit"在這裏應爲"submit"，第二個是需執行的函數，第三個參數爲布爾值；

示例代碼:
if (document.all){
window.attachEvent('onload',函數名)//IE中
}else{
window.addEventListener('load',函數名,false);//firefox
}

javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。