window 物件常見的事件

2022-08-02 19:30:14 字數 1377 閱讀 7916

1.頁面載入事件

方式1:window.onload = function()

window.addeventlistener('load',function())

window.onload 是視窗(頁面)載入事件,當文件內容完全載入成功,就會觸發該事件(包括影象,指令碼檔案,css檔案等),就呼叫的處理函式。

注意:1.有了 window.pnload 就可以把js**寫到頁面元素的上方,因為 onload 是等頁面內容全部載入完畢,再去執行處理函式。

2.window .onload 傳統註冊事件方式只能寫一次,如果有多個,會議最後乙個 window.onload 為準。

3.如果使用 addeventlistener 則沒有限制

方式2:document.addeventlistener('domcontentloaded',function())

domcontentloaded 事件觸發時,僅當 dom 載入完成,不包括樣式表,,flash等等。ie9以上才支援

注意:如果頁面的很多的話,從使用者訪問到 onload 觸發可能需要較長的時間,互動效果就不能實現,必然影響使用者體驗,此時用domcontentloaded 時間比較合適。

2.調整視窗大小事件

window.onresize = function()

window.addeventlisener('load',function(){});

window.onload 是調整視窗大小載入事件,當觸發時就呼叫是處理函式

注意:1.只要視窗大小發生畫素變化就會觸發這個事件

2.經常利用這個事件完成響應式布局,window.innerwidth 當前螢幕寬度。innerheight 當前螢幕高度

3.定時器(兩種方式)

1.settimeout( ) (方式一)

語法規範:window.settimeout(呼叫函式,延時時間);  // 這裡的呼叫函式,也稱作是**函式  callback

1.這個 window 在呼叫時可以省略

2.這個延時時間單位是毫秒,可以省略不寫,如果省略預設是0,立即執行

3.這個呼叫函式可以直接寫函式(callback),還可以寫函式名(『callback( )』)

4.頁面中可能有很多的定時器,我們經常給定時器加識別符號(名字)區分

案例:(三種寫法)

方式1:

settimeout(function(

console.log('時間到了');

){},3000)

方式2:

function callback(),2000);

btn.addeventlistener('click',function(),1000);

}btns[1].onclick=function()

window物件的常見事件

window.onload function 或者 window.addeventlistener load function window.onload是視窗 頁面 載入事件,當文件內容完全載入完會觸發該事件 包括影象 指令碼檔案 css檔案等 就呼叫的處理函式。注意 1.有了window.onl...

BOM 概述 window物件常見事件

bom browser object model 提供了獨立於內容而與瀏覽器視窗進行互動的物件,其核心物件是window。j ascript的標準組織是ecmascript,dom標準化組織是w3c,而bom缺乏標準,是netscape瀏覽器標準的一部分。bom由一系列相關的物件構成,並且每個物件都...

window常見事件onload

頁面 視窗 載入事件 2種 第1種 window.onload 是視窗 頁面 載入事件,當文件內容完全載入完成會觸發該事件 包括影象 指令碼檔案 css 檔案等 就呼叫的處理函式。第2種 domcontentloaded 事件觸發時,僅當dom載入完成,不包括樣式表,flash等等。ie9以上才支援...