文档事件、图片事件和页面滚动事件

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文档事件</title>
 6     <!-- 代码自身至下解析 -->
 7     <script type="text/javascript">
 8         var div = document.querySelector('div');
 9         console.log(div);  // null
10     </script>
11     <script type="text/javascript">
12         // 文档加载完毕,触发
13         window.onload = function () {
14             var div = document.querySelector('div');
15             console.log(div);
16         }
17     </script>
18 </head>
19 <body>
20     <div class="div"></div>
21 </body>
22 <script type="text/javascript">
23     window.onbeforeunload = function () {
24         return false;
25     }
26 </script>
27 </html>

文档事件

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片事件</title>
 6 </head>
 7 <body>
 8     <img src="img/001.png" alt="">
 9 </body>
10 <script type="text/javascript">
11     var img = document.querySelector('img');
12     img.onerror = function () {
13         console.log("图片加载失败了");
14     }
15 </script>
16 </html>

图片事件

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>页面事件</title>
  6     <script type="text/javascript">
  7         window.onload = function () {
  8             window.onscroll = function () {
  9                 console.log(window.scrollY);
 10             }
 11             window.onresize = function () {
 12                 console.log(window);
 13             }
 14 
 15         }
 16     </script>
 17 </head>
 18 <body>
 19     <br>
 20     <br>
 21     <br>
 22     <br>
 23     <br>
 24     <br>
 25     <br>
 26     <br>
 27     <br>
 28     <br>
 29     <br>
 30     <br>
 31     <br>
 32     <br>
 33     <br>
 34     <br>
 35     <br>
 36     <br>
 37     <br>
 38     <br>
 39     <br>
 40     <br>
 41     <br>
 42     <br>
 43     <br>
 44     <br>
 45     <br>
 46     <br>
 47     <br>
 48     <br>
 49     <br>
 50     <br>
 51     <br>
 52     <br>
 53     <br>
 54     <br>
 55     <br>
 56     <br>
 57     <br>
 58     <br>
 59     <br>
 60     <br>
 61     <br>
 62     <br>
 63     <br>
 64     <br>
 65     <br>
 66     <br>
 67     <br>
 68     <br>
 69     <br>
 70     <br>
 71     <br>
 72     <br>
 73     <br>
 74     <br>
 75     <br>
 76     <br>
 77     <br>
 78     <br>
 79     <br>
 80     <br>
 81     <br>
 82     <br>
 83     <br>
 84     <br>
 85     <br>
 86     <br>
 87     <br>
 88     <br>
 89     <br>
 90     <br>
 91     <br>
 92     <br>
 93     <br>
 94     <br>
 95     <br>
 96     <br>
 97     <br>
 98     <br>
 99     <br>
100     <br>
101     <br>
102     <br>
103     <br>
104     <br>
105     <br>
106     <br>
107     <br>
108     <br>
109     <br>
110     <br>
111     <br>
112     <br>
113     <br>
114     <br>
115     <br>
116     <br>
117     <br>
118     <br>
119 </body>
120 </html>

页面滚动事件