关于javascript:documentonLoad-与-Body标签中加入onLoad-和-windowsonload

7次阅读

共计 2054 个字符,预计需要花费 6 分钟才能阅读完成。

问题:我始终认为应用 javascript 的 document.onLoad 指定一个函数,跟在 Body 标签中退出 onLoad 是一样的 不过能过明天的示例发现,document.onLoad 并不是在页面加载实现时引发。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title> 无标题文档 </title>
  <script language="JavaScript">
    function mytest1() {console.log('document', new Date())
      console.log('document', document.querySelector('body'))
      // alert(document.getElementById("my2"));
      console.time()}
    document.onLoad = mytest1();

    function mytest2() {console.log('body', new Date())
      console.log('body', document.querySelector('body'))
      console.log('body img', document.querySelector('img'))
      console.timeEnd()
      console.time()
      // alert(document.getElementById("my2"));
    }
    function mytest3() {console.log('img', new Date())
      console.log('img', document.querySelector('img'))
      console.timeEnd()
      // alert(document.getElementById("my2"));
    }

  </script>
</head>

<body onload="mytest2()">
  <p id="my2" > 测试内容 </p>
  <img onload="mytest3()" src="./logo.png"/>
</body>

</html>

调用 docuemnt.onload 指的是这个文档元素加载实现时,仅当 DOM 加载实现,不包含它子元素,
他们的程序是 docuemnt.onload > body 外部的元素的 onload > body onload

而且,windows.onload 就是 body onload 因为,他们应该是同一个办法

body 标签上的 onload=”mytest2()” 办法会笼罩,windows.onload 赋值办法
如果,windows.onload 是在 加载实现 body 标签之后赋值的 会笼罩 body 标签上的 onload 办法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title> 无标题文档 </title>
  <script language="JavaScript">
    function mytest1() {console.log('document', new Date())
      console.log('document', document.querySelector('body'))
      // alert(document.getElementById("my2"));
     
    }
    document.onLoad = mytest1();

    function mytest2() {console.log('body', new Date())
      console.log('body', document.querySelector('body'))
      console.log('body img', document.querySelector('img'))
    
      // alert(document.getElementById("my2"));
    }
    function mytest3() {console.log('img', new Date())
      console.log('img', document.querySelector('img'))
      
      // alert(document.getElementById("my2"));
    }

    window.onload = function(){console.log('window', new Date())
    }
  </script>
</head>

<body onload="mytest2()">
  <p id="my2" > 测试内容 </p>
  <img onload="mytest3()" src="./logo.png"/>
</body>

</html>  
正文完
 0