JavaScript页面load事件

黄良钵

分类: 程序开发 1489 0

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>页面load事件</title>
  8.         <style>
  9.         </style>
  10.         <script>
  11.             // 可以观察到#document的load事件
  12.             // window.addEventListener('load',function(e){
  13.             //     alert('window1' + e.target.nodeName)
  14.             // })
  15.             // alert(document)
  16.             // document 已存在
  17.             // 观察不到事件 加true可以观察到
  18.         //    document.addEventListener('load',function(e){
  19.         //         console.log('fff')
  20.         //         alert('window:' + e.target.nodeName)
  21.         //     },true)
  22.         function bodyLoad(e){
  23.             alert('body attr:' + e.target.nodeName)
  24.         }
  25.         </script>
  26.     </head>
  27.     <body onload="bodyLoad(event)">
  28.         <img src="http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png?id=1404211047727" alt="">
  29.         <!--图片 body windows 都可以观察到load事件-->
  30.         <script>
  31.             // window.addEventListener('load',function(e){
  32.             //     alert('window' + e.target.nodeName)
  33.             // })
  34.             //  document.addEventListener('load',function(e){
  35.             //     console.log('fff')
  36.             //     alert('document:' + e.target.nodeName)
  37.             // },true)
  38.             // 普通div 观察不到load事件
  39.             // document.querySelector('div').addEventListener('load',function(e){
  40.             //     alert('div load')
  41.             // })
  42.             // 动态生成的div 也观察不到load事件
  43.             // var div =document.createElement('div')
  44.             // div.addEventListener('load',function(e){
  45.             //     alert('div load')
  46.             // })
  47.             // div.innerText = 'div123'
  48.             // document.body.appendChild(div)
  49.             // 图片可以观察到load事件
  50.             // document.querySelector('img').addEventListener('load',function(e){
  51.             //     alert('img load')
  52.             // })
  53.             // 脚本标签 观察不到事件
  54.             // document.querySelector('script').addEventListener('load',function(e){
  55.             //     alert('script load')
  56.             // })
  57.             // 动态创建的脚本文件 可以观察到load事件
  58.             // var script =document.createElement('script')
  59.             // script.src = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'
  60.             // script.addEventListener('load',function(){
  61.             //     alert('script load')
  62.             // })
  63.             // document.head.appendChild(script)
  64.         </script>
  65.         <div>
  66.             这是div
  67.         </div>
  68.     </body>
  69. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、load

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript页面load事件”

Loading...