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

  • 相关阅读:
    微信和支付宝支付模式详解及实现(.Net标准库)- OSS开源系列
    Linux+Nginx+Asp.net Core及守护进程部署
    Docker基础入门及示例
    this的指向问题
    H5C3-JS 此后面试暂不记录了 因为我发现了错题集,直接看就行了
    H5C3-JS day04
    H5C3-JS day03
    two-sum
    H5C3-JS day02
    三次握手四次挥手
  • 原文地址:https://www.cnblogs.com/sunny3158/p/12181788.html
Copyright © 2011-2022 走看看