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.
10. </style>
11. <script>
12. // 可以观察到#document的load事件
13. // window.addEventListener('load',function(e){
14. // alert('window1' + e.target.nodeName)
15. // })
16. // alert(document)
17. // document 已存在
18.
19. // 观察不到事件 加true可以观察到
20. // document.addEventListener('load',function(e){
21. // console.log('fff')
22. // alert('window：' + e.target.nodeName)
23. // },true)
24.
25. function bodyLoad(e){
26. alert('body attr:' + e.target.nodeName)
27. }
28. </script>
29. </head>
30. <body onload="bodyLoad(event)">
31. <img src="https://678pdf.com/assets/uploads/461a30f8075c9078334b35ea627973ca.jpg" alt="">
32.
33. <!--图片 body windows 都可以观察到load事件-->
34. <script>
35. // window.addEventListener('load',function(e){
36. // alert('window' + e.target.nodeName)
37. // })
38. // document.addEventListener('load',function(e){
39. // console.log('fff')
40. // alert('document：' + e.target.nodeName)
41. // },true)
42.
43. // 普通div 观察不到load事件
44. // document.querySelector('div').addEventListener('load',function(e){
45. // alert('div load')
46. // })
47.
48. // 动态生成的div 也观察不到load事件
49. // var div =document.createElement('div')
50. // div.addEventListener('load',function(e){
51. // alert('div load')
52. // })
53. // div.innerText = 'div123'
54. // document.body.appendChild(div)
55.
56. // 图片可以观察到load事件
57. // document.querySelector('img').addEventListener('load',function(e){
58. // alert('img load')
59. // })
60.
61. // 脚本标签 观察不到事件
62. // document.querySelector('script').addEventListener('load',function(e){
63. // alert('script load')
64. // })
65.
66. // 动态创建的脚本文件 可以观察到load事件
67. // var script =document.createElement('script')
68. // script.src = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'
69. // script.addEventListener('load',function(){
70. // alert('script load')
71. // })
72. // document.head.appendChild(script)
73.
74. </script>
75. <div>
76. 这是div
77. </div>
78. </body>
79. </html>