當前位置：首頁 > 运维知识 > windows >内容正文

windows

windows.onload和body的onload属性的区别

發布時間：2023/12/2 windows 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 windows.onload和body的onload属性的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

關于windows.onload和body的onload屬性的區別網上有些說法說的也不太統一,現在系統說下:
先看共同點: 都是body內容體加載結束執行；
window.onload 內部方式可以推薦的
body onload屬性：內聯或者內嵌方式可以，內部也可以

首先,這兩個onload事件只能執行一個
在程序中設置一個onload的事件時,第一種：只設置body onload屬性中可以查找到body元素 ,第二種：只設置window.onload函數中也可以查找到body元素,這是因為這兩個都是body內容體加載結束執行的
兩者同時設置：只執行body onload屬性的內容； (window.onload在head頭部中出現的情況),另外,還有如果window.onload出現在body onload屬性的后面的情況.無論順序則么樣,除了onload事件的代碼,都是按照順序來進行的,等加載完body的頁面,再執行onload事件,后面onload事件是可以覆蓋前面的onload事件的.具體看代碼:
---------------------

<!DOCTYPE html> <html> <head> <script type="text/javascript"> alert('a');window.onload=function () { alert('b'); } ;alert('c');</script> </head> <body onload="alert('d');"> </body> </html>

執行結果是:a c d
ac先會alert出來沒有疑問,對于bd,就是誰在下面就會執行誰,這是因為html標簽的加載順序是除onload之外從上向下加載,然后會按從上向下的順序加載onload事件,所以下面的onload會把上面的onload事件給覆蓋掉.(使用谷歌瀏覽器)
再看另外一個代碼:

<!DOCTYPE html> <html> <head> </head> <body onload="alert('d');"> </body> <script type="text/javascript"> alert('a');window.onload=function () { alert('b'); } ;alert('c');</script> </html>

按照上面的解釋,執行結果是acb,和運行的結果是一致的.

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的windows.onload和body的onload属性的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS未知宽高元素水平垂直居中
下一篇： React后台管理系统-登录页面