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

Posted 2021-03-16 sunny3158

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了windows.onload和body的onload属性的区别相关的知识，希望对你有一定的参考价值。

原文链接 https://blog.csdn.net/Myair_AC/article/details/77839255

1 . 关于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.οnlοad=function () {  
       alert(‘b‘);  
         } ;
       alert(‘c‘);
   </script> 
   </head>   
   <body onload="alert(‘d‘);">  

   </body>   

</html>  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

执行结果是: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.οnlοad=function () {  

       alert(‘b‘);  

         } ;

       alert(‘c‘);

   </script> 
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

按照上面的解释,执行结果是acd,和运行的结果是一致的.

以上是关于windows.onload和body的onload属性的区别的主要内容，如果未能解决你的问题，请参考以下文章

with(window) onload=onresize=function(){} 写法