zoukankan      html  css  js  c++  java
  • 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,和运行的结果是一致的.

  • 相关阅读:
    vgrant使用简易教程
    php数组常用函数总结
    php面向对象基础知识整理之类中的属性和方法的使用
    apache和nginx的区别
    thinkphp发送邮箱(以thinkphp5作为示例)。
    利用html2canvas将当前网页保存为图片.
    作为一名程序员该如何思考自己的职业人生?
    js常用返回网页顶部几种方法
    如何本地搭建centos7虚拟主机?
    Spark报错
  • 原文地址:https://www.cnblogs.com/7qin/p/9960898.html
Copyright © 2011-2022 走看看