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

Posted 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属性: 内联或者内嵌方式可以, 内部也可以

  1. 首先,这两个onload事件只能执行一个
  2. 在程序中设置一个onload的事件时,第一种:只设置body onload属性中可以查找到body元素 ,第二种:只设置window.onload函数中也可以查找到body元素,这是因为这两个都是body内容体加载结束执行的
  3. 两者同时设置:只执行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(){} 写法

js下载图片

系统时间对象

Jquery

微信小程序-枯木学习笔记4-欢迎页面

微信小程序-枯木学习笔记4-欢迎页面